直接上代码,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而后开始动画流程。
