Transition

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 the CSSTransition component forces reflows in order to make more complex transitions more predictable. For example, even though classes example-enter and example-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 between Transition and CSSTransition.

Example

Props

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>
type: Function | element
required

in

Show the component; triggers the enter or exit states

type: boolean
default: 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.

type: boolean
default: 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.

type: boolean
default: 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 additional enter transition.

type: boolean
default: false

enter

Enable or disable enter transitions.

type: boolean
default: true

exit

Enable or disable exit transitions.

type: boolean
default: 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,
}}
type: 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);
}}
type: 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

type: Function(node: HtmlElement, isAppearing: bool) -> void
default: 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

type: Function(node: HtmlElement, isAppearing: bool)
default: 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

type: Function(node: HtmlElement, isAppearing: bool) -> void
default: function noop() {}

onExit

Callback fired before the "exiting" status is applied.

type: Function(node: HtmlElement) -> void
default: function noop() {}

onExiting

Callback fired after the "exiting" status is applied.

type: Function(node: HtmlElement) -> void
default: function noop() {}

onExited

Callback fired after the "exited" status is applied.

type: Function(node: HtmlElement) -> void
default: function noop() {}