react-animated-transitions

Installation

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).

Usage

import Animated from 'react-animated-transitions';
 
// animate a child (when mounted/unmounted)
<Animated>
  <Foo />
</Animated>
 
// animate a group of children
<Animated items>
  {foos.map(() => <Animated item><Foo /></Animated>)}
</Animated>

With animate.css transition presets

List of available animations in animate.css.

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
<Animated enter="fadeIn" exit="fadeOut" />
<Animated enter="tada" exit="zoomOut" />
 
// 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 <Animated items />, you can use them with <Animated /> and <Animated item />.

With a custom transition preset

To pass a custom preset, you need to add its css first, which is based on react-transition-group.

/* 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:

import './foo.css';
 
<Animated preset="foo" />; // notice that foo is used as a unique identifier in the css

Passing a custom timeout

The timeout should match the css transition duration.

<Animated timeout={1000} /> // default is 1000ms
 
// different timeout for entrance and exit
<Animated timeout={{ enter: 750, exit: 500 }} />

Overwriting animate.css default duration

animate.css presets have a default timeout of 1000ms, to change this number you can overwrite the css.

/* overwrite.css */
 
/* global */
.animated {
  animation-duration: 3000ms;
}
 
/* specific */
.animated.fadeIn {
  animation-duration: 3000ms;
}

Then in your JavaScript:

import './overwrite.css'; // make sure you include animate.css before this line
 
<Animated timeout={3000} />;

Disabling animation

Sometimes you may want to prevent your component from animating, but it is still being wrapped in <Animated />.

<Animated disabled />

Examples

Available here.