• Component does not need to be a DOM component.
  • Normally TransitionGroup wraps all its children in a span (or a custom component as described above).
  • The approach wouldn’t work when animating multiple children or replacing the single child with another child, such as an image carousel.
  • You can use the classes to trigger a CSS animation or transition.
  • If you only need to render a single child inside TransitionGroup , you can completely avoid wrapping it in a or any other DOM component.

Contribute to react-transition-group development by creating an account on GitHub.

@dan_abramov: If you use React TransitionGroup, please try the fork @monasticpanic and @jimmy_jia have extracted from React repo:

A fork, and “drop in” replacement for the original React TransitionGroup addons. Eventually this package can supercede the original addon, letting the React team focus on other stuff and giving these components a chance to get the attention they deserve out on their own. See: for more context.

A ton of thanks to the React team, and contributors for writing and maintaining these components for so long!

is an add-on component for easily implementing basic CSS animations and transitions.

and is an easy way to perform CSS transitions and animations when a React component enters or leaves the DOM. It’s inspired by the excellent ng-animate library.


You can use these classes to trigger a CSS animation or transition. For example, try adding this CSS and adding a new list item:

You’ll notice that animation durations need to be specified in both the CSS and the render method; this tells React when to remove the animation classes from the element and — if it’s leaving — when to remove the element from the DOM.

CSS class added in the next tick.

class names. If only the enter and leave classes are provided, the enter-active and leave-active classes will be determined by appending ‘-active’ to the end of the class name. Here are two examples using custom classes:

is being mounted along with the new item, instead of the new item being mounted within it. Compare this to the Getting Started section above to see the difference.

can also be one or zero items. This makes it possible to animate a single element entering or leaving. Similarly, you can animate a new element replacing the current element. For example, we can implement a simple image carousel like this:

to disable these animations.

is the basis for animations. When children are declaratively added or removed from it (as in the example above), special lifecycle hooks are called on them.

with CSS class:

is no exception to this rule.

or any other DOM component. To do this, create a custom component that renders the first child passed to it directly:

props and avoid any wrappers in the result DOM:

prop as described above.

is called.

is called.

is called.

A derivative of “Animation Add-Ons” by the React authors and contributors, used under CC BY.