React动画（ReactCSSTransitionGroup）

直接上代码,app.jsx：

import React from 'react'
import Text1 from './Textarea1.jsx'
import Text2 from './Textarea2.jsx'
var ReactCSSTransitionGroup = require('react-addons-css-transition-group');
export default React.createClass({
  getInitialState:function(){
        return{show:false}
        //console.log(this.props);
  },
  addItem:function(){
      this.setState({show:!this.state.show});
  },
  render: function() {
      //console.log(this.state);
       if(this.state.show)
       {return (
      <div>
 <ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={5000} transitionLeaveTimeout={3000}>
           <Text1/>
        </ReactCSSTransitionGroup>
        <button onClick={this.addItem}>增加</button>
      </div>
       );}
    else 
    {
        return (
      <div>
  <ReactCSSTransitionGroup transitionName="example2" transitionEnterTimeout={5000} transitionLeaveTimeout={3000}>
          <Text2/>
        </ReactCSSTransitionGroup>
        <button onClick={this.addItem}>增加</button>
      </div>
       );
    }
  }
})

通过上述例子主要想看ReactCSSTransitionGroup什么时候会触发动画。设置state的做法不建议那样

• 最开始的show为false，Text2组件并没有动画，因为它是与ReactCSSTransitionGroup同时挂载的，必须新项挂载到ReactCSSTransitionGroup上才会触发动画（如果想让初始值产生动画，可以延时将数据绑到state上，此时会先有ReactCSSTransitionGroup，而后有子项，可以触发动画）。
• 虽然每次render都会有ReactCSSTransitionGroup，但实际操作的是虚拟DOM，可以参见diff比较机制。所以ReactCSSTransitionGroup始终是挂载的。也就有了每次动画的产生。
• ReactCSSTransitionGroup是由key来区分是否有新项插入删除，如果没有提供key属性，在这个例子中是不会出发动画的，因为ReactCSSTransitionGroup的子节点key不提供时，默认为1，所以ReactCSSTransitionGroup组件判断没有子元素插入（觉得这点有点不科学，组件名字不一样React会默认整个替换掉，也就是说可以以组件名字是否相同来判断是否有新项产生，而ReactCSSTransitionGroup却还是以key来判断，哪怕他们的组件名称是不同的）
• 当点增加按钮show从false变为true时可以观察到，Text2组件会样依次运用.example-leave .example-leave-active 类，Text1会运用.example-enter .example-enter-active类；而show从true变为false时Text1组件会样依次运用.example2-leave .example2-leave-active 类，Text2会运用.example2-enter .example2-enter-active类。可以看出ReactCSSTransitionGroup会用其最新的transitionName而后开始动画流程。