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