react-css-transition实战

@youngwind 2016-04-13 08:30:25发表于 youngwind/blog React

问题

继上回 #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>

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