The Transition component lets you describe a transition from one component state to another over time with a simple declarative API. Most commonly it's used to animate the mounting and unmounting of a component, but can also be used to describe in-place transition states as well.
By default the Transition
component does not alter the behavior of the
component it renders, it only tracks "enter" and "exit" states for the components.
It's up to you to give meaning and effect to those states. For example we can
add styles to a component when it enters or exits:
import Transition from 'react-transition-group/Transition';
const duration = 300;
const defaultStyle = {
transition: `opacity ${duration}ms ease-in-out`,
opacity: 0,
}
const transitionStyles = {
entering: { opacity: 0 },
entered: { opacity: 1 },
};
const Fade = ({ in: inProp }) => (
<Transition in={inProp} timeout={duration}>
{(state) => (
<div style={{
...defaultStyle,
...transitionStyles[state]
}}>
I'm a fade Transition!
</div>
)}
</Transition>
);
As noted the Transition
component doesn't do anything by itself to its child component.
What it does do is track transition states over time so you can update the
component (such as by adding styles or classes) when it changes states.
There are 4 main states a Transition can be in:
entering
entered
exiting
exited
Transition state is toggled via the in
prop. When true
the component begins the
"Enter" stage. During this stage, the component will shift from its current transition state,
to 'entering'
for the duration of the transition and then to the 'entered'
stage once
it's complete. Let's take the following example:
state= { in: false };
toggleEnterState = () => {
this.setState({ in: true });
}
render() {
return (
<div>
<Transition in={this.state.in} timeout={500} />
<button onClick={this.toggleEnterState}>Click to Enter</button>
</div>
);
}
When the button is clicked the component will shift to the 'entering'
state and
stay there for 500ms (the value of timeout
) before it finally switches to 'entered'
.
When in
is false
the same thing happens except the state moves from 'exiting'
to 'exited'
.
Note: For simpler transitions the
Transition
component might be enough, but take into account that it's platform-agnostic, while theCSSTransition
component forces reflows in order to make more complex transitions more predictable. For example, even though classesexample-enter
andexample-enter-active
are applied immediately one after another, you can still transition from one to the other because of the forced reflow (read this issue for more info). Take this into account when choosing betweenTransition
andCSSTransition
.
children
A function
child can be used instead of a React element.
This function is called with the current transition status
('entering', 'entered', 'exiting', 'exited', 'unmounted'), which can be used
to apply context specific props to a component.
<Transition timeout={150}>
{(status) => (
<MyComponent className={`fade fade-${status}`} />
)}
</Transition>
Function | element
in
Show the component; triggers the enter or exit states
boolean
false
mountOnEnter
By default the child component is mounted immediately along with
the parent Transition
component. If you want to "lazy mount" the component on the
first in={true}
you can set mountOnEnter
. After the first enter transition the component will stay
mounted, even on "exited", unless you also specify unmountOnExit
.
boolean
false
unmountOnExit
By default the child component stays mounted after it reaches the 'exited'
state.
Set unmountOnExit
if you'd prefer to unmount the component after it finishes exiting.
boolean
false
appear
Normally a component is not transitioned if it is shown when the <Transition>
component mounts.
If you want to transition on the first mount set appear
to true
, and the
component will transition in as soon as the <Transition>
mounts.
Note: there are no specific "appear" states.
appear
only adds an additionalenter
transition.
boolean
false
enter
Enable or disable enter transitions.
boolean
true
exit
Enable or disable exit transitions.
boolean
true
timeout
The duration of the transition, in milliseconds.
Required unless addEndListener
is provided
You may specify a single timeout for all transitions like: timeout={500}
,
or individually like:
timeout={{
enter: 300,
exit: 500,
}}
number | { enter?: number, exit?: number }
addEndListener
Add a custom transition end trigger. Called with the transitioning
DOM node and a done
callback. Allows for more fine grained transition end
logic. Note: Timeouts are still used as a fallback if provided.
addEndListener={(node, done) => {
// use the css transitionend event to mark the finish of a transition
node.addEventListener('transitionend', done, false);
}}
Function
onEnter
Callback fired before the "entering" status is applied. An extra parameter
isAppearing
is supplied to indicate if the enter stage is occurring on the initial mount
Function(node: HtmlElement, isAppearing: bool) -> void
function noop() {}
onEntering
Callback fired after the "entering" status is applied. An extra parameter
isAppearing
is supplied to indicate if the enter stage is occurring on the initial mount
Function(node: HtmlElement, isAppearing: bool)
function noop() {}
onEntered
Callback fired after the "entered" status is applied. An extra parameter
isAppearing
is supplied to indicate if the enter stage is occurring on the initial mount
Function(node: HtmlElement, isAppearing: bool) -> void
function noop() {}
onExit
Callback fired before the "exiting" status is applied.
Function(node: HtmlElement) -> void
function noop() {}
onExiting
Callback fired after the "exiting" status is applied.
Function(node: HtmlElement) -> void
function noop() {}
onExited
Callback fired after the "exited" status is applied.
Function(node: HtmlElement) -> void
function noop() {}