React为动画提供了一个附加组件ReactTransitionGroup，这个附加组件是动画的底层API，并且还提供了一个附件组件ReactCSSTransitionGroup，ReactCSSTransitionGroup能够简单的实现基于css的动画和转换
ReactCSSTransitionGroup是一个基于ReactTransitionGroup的API，当一个React组件插入或者移除DOM时，它是一种简单的去执行css转换和动画的方法
以一个demo举例ReactCSSTransitionGroup是ReactTransitions的接口，可以把它当做一个简单的元素，它包裹着所有想添加动画效果的React组件。下面有一个例子：
var ReactCSSTransitionGroup = require(‘react-addons-css-transition-group‘); var React = require(‘react‘); var ReactDOM = require(‘react-dom‘); var data = [‘one‘,‘two‘,‘three‘]; var Control = React.createClass({ getInitialState:function(){ return { ‘items‘:this.props.data } }, addItem:function(){ var newItems = this.state.items.concat(‘four‘); this.setState({ ‘items‘:newItems }); }, removeItem:function(i){ var newItems = this.state.items; newItems.splice(i,1); this.setState({ ‘items‘:newItems }); }, render:function(){ var $this = this; var List = this.state.items.map(function(value,index){ return <div key={value} onClick = {$this.removeItem.bind($this,index)}> { value}</div> }); return ( <div> <button onClick=http://www.mamicode.com/{this.addItem}>add Item</button> <ReactCSSTransitionGroup transitionName=‘example‘ transitionEnterTimeout={500} transitionLeaveTimeout={300}> {List} </ReactCSSTransitionGroup> </div> ) } }); ReactDOM.render(<Control data={data}/> ,document.getElementById(‘content‘));
对例子的解释：
（1）你需要用npm安装react-addons-css-transition-group，然后通过require在文件中引入，然后赋给一个变量，在这里将这个变量命名为ReactCSSTransitionGroup，也可以不取别的名字
（2）为每一个ReactCSSTransitionGroup组件的子元素设置一个key属性，就算它只有一个子元素。key值必须是唯一的。设置一个key属性是为了让react确定那个子元素插入了，移除了，或者保持。
（3）在这个demo中，当一个新的子元素被添加到ReactCSSTransitionGroup中，它就会得到一个example-enter CSS类名，随后它又会得到一个example-enter-active CSS类名。这些类名基于transitionName属性值。你能够使用这个类名去实现css动画。添加如下的css样式：
.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; }
这些样式中transition-duration值必须与ReactCSSTransitionGroup组件的transitionEnterTimeout和transitionLeaveTimeout属性值一一对应