O'Reilly logo

ReactJS by Example - Building Modern Web Applications with React by Prathamesh Sonpatki, Vipul A M

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required