react-transition-group 升级指南

26. 七月 2017 React 0

这只是一篇个人记录文章。

 

使用react-router切换页面显得有些单调乏味。所以我们会使用react-transition-group 来进行一些动画的设置,主要是路由的进出动画,当然也可以做其他的动画展示,只是css3 的问题。

react-transition-group 用的大多是1.2.0 或者 1.1.1 的版本,现在是2.2.2的版本,API基本上都变化了。

Note:ReactTransitionGroupReactCSSTransitionGroup已被移动到由社区维护的react-transition-group包。 它的1.x分支与现有的插件完全是API兼容的。 请在新的存储库中提出错误和功能请求。

 

  • transitionName -> classNames
  • transitionEnterTimeout and transitionLeaveTimeout -> timeout={{ exit, enter }}
  • transitionAppear -> appear
  • transitionEnter -> enter
  • transitionLeave -> exit

 

API 的更换对应着css的class也需要更换 ,不过只需更换一个。leave->exit

官方文档中已经给了 两个Demo 对比,这里我就把自己的Demo写一下。

相同的功能,分别用v1 和v2 来写一下。

功能就是路由的切换动画,

这里依赖的版本是

"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-router": "^4.1.2",
"react-router-dom": "^4.1.2",

 

V1 版本

"react-transition-group": "^1.1.1"

对应的CSS

V2 版本

"react-transition-group": "^2.2.0"

对应的CSS

具体对应关系在官方文档中已经很明确的指出,这里不再赘述。

 


发表评论

电子邮件地址不会被公开。