CSSTransitionGroup

CSSTransitionGroup is a high-level API based on TransitionGroup 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.

Importing

import { CSSTransitionGroup } from ‘react-transition-group’ // ES6

var CSSTransitionGroup = require(‘react-transition-group/CSSTransitionGroup’) // ES5 with npm

class TodoList extends React.Component {

constructor(props) {

super(props);

this.state = {items: [‘hello’, ‘world’, ‘click’, ‘me’]};

this.handleAdd = this.handleAdd.bind(this);

}

handleAdd() {

const newItems = this.state.items.concat([

prompt(‘Enter some text’)

]);

this.setState({items: newItems});

}

handleRemove(i) {

let newItems = this.state.items.slice();

newItems.splice(i, 1);

this.setState({items: newItems});

}

render() {

const items = this.state.items.map((item, i) => (

<div key={item} onClick={() => this.handleRemove(i)}>

{item}

</div>

));

return (

<div>

<CSSTransitionGroup

transitionName=”example”

transitionEnterTimeout={500}

transitionLeaveTimeout={300}>

{items}

</CSSTransitionGroup>

</div>

);

}

In this component, when a new item is added to CSSTransitionGroup it will get the example-enter CSS class and the example-enter-active CSS class added in the next tick. This is a convention based on the transitionName prop.

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

.example-enter {

opacity: 0.01;

}

.example-enter.example-enter-active {

opacity: 1;

transition: opacity 500ms ease-in;

}

.example-leave {

opacity: 1;

}

.example-leave.example-leave-active {

opacity: 0.01;

transition: opacity 300ms ease-in;

}

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.

Animate Initial Mounting

CSSTransitionGroup provides the optional prop transitionAppear, to add an extra transition phase at the initial mount of the component. There is generally no transition phase at the initial mount as the default value of transitionAppear is false. The following is an example which passes the prop transitionAppear with the value true.

render() {

return (

<CSSTransitionGroup

transitionName=”example”

transitionAppear={true}

transitionAppearTimeout={500}

transitionEnter={false}

transitionLeave={false}>

<h1>Fading at Initial Mount</h1>

</CSSTransitionGroup>

);

}

During the initial mount CSSTransitionGroup will get the example-appear CSS class and the example-appear-active CSS class added in the next tick.

.example-appear {

opacity: 0.01;

}

.example-appear.example-appear-active {

opacity: 1;

transition: opacity .5s ease-in;

}

At the initial mount, all children of the CSSTransitionGroup will appear but not enter. However, all children later added to an existing CSSTransitionGroup will enter but not appear.

Custom Classes

It is also possible to use custom class names for each of the steps in your transitions. Instead of passing a string into transitionName you can pass an object containing either the enter and leave class names, or an object containing the enter, enter-active, leave-active, and leave 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:

// …

<CSSTransitionGroup

transitionName={ {

enter: ‘enter’,

enterActive: ‘enterActive’,

leave: ‘leave’,

leaveActive: ‘leaveActive’,

appear: ‘appear’,

appearActive: ‘appearActive’

} }>

{item}

</CSSTransitionGroup>

<CSSTransitionGroup

transitionName={ {

enter: ‘enter’,

leave: ‘leave’,

appear: ‘appear’

} }>

{item2}

</CSSTransitionGroup>

// …

Animation Group Must Be Mounted To Work

In order for it to apply transitions to its children, the CSSTransitionGroup must already be mounted in the DOM or the prop transitionAppear must be set to true.

The example below would not work, because the CSSTransitionGroup is being mounted along with the new item, instead of the new item being mounted within it.

render() {

const items = this.state.items.map((item, i) => (

<div key={item} onClick={() => this.handleRemove(i)}>

{item}

</CSSTransitionGroup>

</div>

));

return (

<div>

{items}

</div>

);

}

Animating One or Zero Items

In the example above, we rendered a list of items into CSSTransitionGroup. However, the children of CSSTransitionGroup 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:

import CSSTransitionGroup from ‘react-transition-group/CSSTransitionGroup’;

function ImageCarousel(props) {

return (

<div>

<CSSTransitionGroup

transitionName=”carousel”

transitionEnterTimeout={300}

transitionLeaveTimeout={300}>

</CSSTransitionGroup>

</div>

);

}