react-css-transition实战

[youngwind]

问题

继上回 #57 做了react动画的demo之后，我尝试将demo整合到项目当中，不过同样遇到了很多问题。
#1. 安装！

原先参考一些教程和做demo的时候引用react-css-transition的时候是这样的。

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

实际当中却不行。原因是因为在react v0.15版本开始，addons这些插件都会被单独出来。所以得单独安装使用。。
插件地址在这儿。https://www.npmjs.com/package/react-addons-css-transition-group
参考官方文档：https://facebook.github.io/react/docs/addons.html
#2. 由key值是否改变控制是否切换

比如说。

var Word = return (
      <div className="demo" key={this.state.index}>
      <h1>{this.state.index}</h1>
      // 这里还嵌套很多组件
      </div>
)

<ReactCSSTransitionGroup transitionName="example">
   {Word}
</ReactCSSTransitionGroup>

只有this.state.index发生变化的时候，才会触发动画，而不管里面嵌套了多少组件。
#3. DOM元素什么时候消失？

在最开始的demo中，DOM元素添加了example-leave类之后什么时候消失，其实是通过动画本身指定的。
也就是说，当动画结束之后，要离开的DOM元素才会从真实DOM中删除。
但是我在使用最新版本的ReactCSSTransitionGroup的时候却报了warning。

Warning: Failed propType: transitionEnterTimeout wasn't supplied to ReactCSSTransitionGroup: this can cause unreliable animations and won't be supported in a future version of React. See https://fb.me/react-animation-transition-group-timeout for more information. Check the render method of Question.

在这里，就最好在ReactCSSTransitionGroup中指定给元素添加了leave-active类之后多久删除DOM元素，而不是由动画间接决定。同样的道理，进入也需要做这样的处理。
代码大概如下：

<ReactCSSTransitionGroup 
     transitionName="example" 
     transitionLeaveTimeout={1500}
     transitionEnterTimeout={1500}>
   {this.returnHtml()}
</ReactCSSTransitionGroup>

参考资料：
https://www.alloyteam.com/2016/01/react-animation-practice/