react-css-transition实战
youngwind opened this issue · comments
问题
继上回 #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/