/ Animation

An easy way to perform animations when a React component enters or leaves the DOM

An easy way to perform animations when a React component enters or leaves the DOM

React Transition Group

ATTENTION! To address many issues that have come up over the years, the API in v2 is not backwards compatible with the original React addon (v1-stable).

For a drop-in replacement for react-addons-transition-group and react-addons-css-transition-group, use the v1 release, which is still actively maintained. Documentation and code for that release are available on the v1-stable branch.

You can send pull requests with v1 bugfixes against the v1-stable branch.

A set of components for managing component states (including mounting and unmounting) over time, specifically designed with animation in mind.

Installation

npm
npm install react-transition-group --save
yarn
yarn add react-transition-group
CDN / External

Since react-transition-group is fairly small, the overhead of including the library in your application is negligible. However, in situations where it may be useful to benefit from an external CDN when bundling, link to the following CDN: https://unpkg.com/react-transition-group/dist/react-transition-group.min.js

Examples

Clone the repo first:

[email protected]:reactjs/react-transition-group.git

Then run npm install (or yarn), and finally npm run storybook to start a storybook instance that you can navigate to in your browser to see the examples.

GitHub