Easy animated transitions in React.
npm install react-animated-transitions

yarn add react-transition-group react-animated-transitions animate.css
animate.css is optional, without it you will have to write your own transition presets. The package includes only a single preset out of the box (a simple fade transition).
``javascript
import Animated from 'react-animated-transitions';
// animate a child (when mounted/unmounted)
// animate a group of children
{foos.map(() =>
`
List of available animations in animate.css.
`javascript
import 'animate.css'; // once, you don't need it if you are using your custom presets
// you can also create a custom build with only the presets you are using
// you can use any combination
// you can import presets individually as well
import 'animate.css/source/attention_seekers/tada.css';
import 'animate.css/source/zooming_exits/zoomOut.css';
// when you import individually, you need add the duration to your css
/ duration.css /
.animated {
animation-duration: 1000ms;
}
import './duration.css'; // after individual imports
`
Presets are not needed for , you can use them with and .
To pass a custom preset, you need to add its css first, which is based on react-transition-group.
`css
/ foo.css /
.foo-appear,
.foo-enter {
/ transition state at 0% /
}
.foo-appear-active,
.foo-enter-active {
/ transition state at 100% /
/ transition definition /
}
.foo-exit {
/ transition state at 100% /
}
.foo-exit-active {
/ transition state at 0% /
/ transition definition /
}
/ example: fade.css /
.fade-appear,
.fade-enter {
opacity: 0;
}
.fade-appear-active,
.fade-enter-active {
opacity: 1;
transition: opacity 400ms ease-in;
}
.fade-exit {
opacity: 1;
}
.fade-exit-active {
opacity: 0;
transition: opacity 400ms ease-out;
}
`
Then in your JavaScript:
`javascript
import './foo.css';
`
The timeout should match the css transition duration.
`javascript
// different timeout for entrance and exit
`
animate.css presets have a default timeout of 1000ms, to change this number you can overwrite the css.
`css
/ overwrite.css /
/ global /
.animated {
animation-duration: 3000ms;
}
/ specific /
.animated.fadeIn {
animation-duration: 3000ms;
}
`
Then in your JavaScript:
`javascript
import './overwrite.css'; // make sure you include animate.css before this line
`
Sometimes you may want to prevent your component from animating, but it is still being wrapped in .
`javascript``

Available here.