react-transition-group

Transition

The Transition component lets you describe a transition from one component state to another over time with a simple declarative API. The 'in' prop is used to toggle the visibility of the component.

import { Transition } from 'react-transition-group';

<Transition in={this.state.show} timeout={300}>
  {state => (
    <div className={`fade fade-${state}`}>{this.props.children}</div>
  )}
</Transition>

CSSTransition

The CSSTransition component is a wrapper around the Transition component that lets you define enter and exit transitions using CSS class names. It's useful when you want to apply a set of CSS transitions to a single entering or leaving element.

import { CSSTransition } from 'react-transition-group';

<CSSTransition in={this.state.show} timeout={300} classNames='fade'>
  <div>{this.props.children}</div>
</CSSTransition>

TransitionGroup

The TransitionGroup component manages a set of transition components (like CSSTransition) in a list. When items are added or removed from the list, the TransitionGroup will trigger the enter or exit states for those items.

import { TransitionGroup, CSSTransition } from 'react-transition-group';

<TransitionGroup>
  {this.state.items.map(item => (
    <CSSTransition key={item.id} timeout={500} classNames='item'>
      <div>{item.text}</div>
    </CSSTransition>
  ))}
</TransitionGroup>

SwitchTransition

The SwitchTransition component is used to transition between two elements that switch out with each other. It's useful for transitioning between two components that enter and leave at the same time, like routes or toggling views.

import { SwitchTransition, CSSTransition } from 'react-transition-group';

<SwitchTransition>
  <CSSTransition key={this.state.mode} addEndListener={(node, done) => node.addEventListener('transitionend', done, false)} classNames='fade'>
    <div>{this.state.status}</div>
  </CSSTransition>
</SwitchTransition>