ReactJS by Example - Building Modern Web Applications with React

Animate

"React allows us to animate objects easily with its react-addons-css-transition-group add-on."

"This gives us a handle to the ReactCSSTransitionGroup object, which is what we will be using to animate changes in data, such as addition of cats, faving/unfaving, and so on."

"Let's start by animating the addition of new cats to the stream, shall we?"

render() { let Cats = this.state.catGenerator.Cats; return ( <div> <div> <ReactCSSTransitionGroup transitionName="cats" transitionEnterTimeout={500} transitionLeaveTimeout={300} transitionAppear={true} transitionAppearTimeout={500}> {Cats.map(cat => ( <div key={cat.cid} style={{float: 'left'}}> <Link to={`/pictures/${cat.cid}`} state={{ modal: true, returnTo: this.props.location.pathname, cat: cat ...