Sample of how to use the React Addons CSS Transition Group ... code by Stephen Grider

PracticeAnimations.jsx

import React, { Component } from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import Faker from 'faker';
import _ from 'lodash';

export default class PracticeAnimations extends Component {

	constructor(props) {
		super(props);
		this.state = { quotes: [] };
	}

	onAddClick() {
		const quote = Faker.lorem.sentence();
		this.setState({ quotes: [...this.state.quotes, quote] });
	}

	onRemoveClick(quote) {
		this.setState({ quotes: _.without(this.state.quotes, quote)});
	}

	renderQuotes() {
		return this.state.quotes.map((item, index) => {
			return (
				<li>
					{item}
					<button onClick={this.onRemoveClick.bind(this, item)} className="success button">Remove</button>
				</li>
			)
		});
	}

	render() {

		//The transiton name will also be used for the css class definiton
		const transitionOptions = {
			transitionName: 'fade',
			transitionEnterTimeout: 500,
			transitionLeaveTimeout: 500
		};

		return (
			<div>
			 
			  <div id="practice">
			  	<button onClick={this.onAddClick.bind(this)} className="button success">Add</button>
				  	<ul>
				  	  <ReactCSSTransitionGroup {...transitionOptions}>
				  	    {this.renderQuotes()}
				  	  </ReactCSSTransitionGroup>
				  	</ul>
			  </div>

			</div>
		);
	}

}

styles.css

#practice li {
    position: relative;
}

/* Starting State of Animation */

.fade-enter {
    right: 100px;
}

/* End State of Animation */
.fade-enter-active {
    right: 0px;
    transition: .5s ease-in all;
}