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.

Note: Transition is a platform-agnostic base component. If you're using transitions in CSS, you'll probably want to use CSSTransition instead. It inherits all the features of Transition, but contains additional features necessary to play nice with CSS transitions (hence the name of the component).

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';

const duration = 300;

const defaultStyle = {
  transition: `opacity ${duration}ms ease-in-out`,
  opacity: 0,
}

const transitionStyles = {
  entering: { opacity: 1 },
  entered:  { opacity: 1 },
  exiting:  { opacity: 0 },
  exited:  { opacity: 0 },
};

const Fade = ({ in: inProp }) => (
  <Transition in={inProp} timeout={duration}>
    {state => (
      <div style={{
        ...defaultStyle,
        ...transitionStyles[state]
      }}>
        I'm a fade Transition!
      </div>
    )}
  </Transition>
);

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 (we'll use the useState hook):

function App() {
  const [inProp, setInProp] = useState(false);
  return (
    <div>
      <Transition in={inProp} timeout={500}>
        {state => (
          // ...
        )}
      </Transition>
      <button onClick={() => setInProp(true)}>
        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'.

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'), which can be used to apply context specific props to a component.

<Transition in={this.state.in} timeout={150}>
  {state => (
    <MyComponent className={`fade fade-${state}`} />
  )}
</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 special appear states like appearing/appeared, this prop only adds an additional enter transition. However, in the <CSSTransition> component that first enter transition does result in additional .appear-* classes, that way you can choose to style it differently.

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:

timeout={500}

or individually:

timeout={{
 appear: 500,
 enter: 300,
 exit: 500,
}}
  • appear defaults to the value of enter
  • enter defaults to 0
  • exit defaults to 0
type: number | { enter?: number, exit?: number, appear?: 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() {}