怎么给React-Router添加路由页面切换时的过渡动画
小编给大家分享一下怎么给React-Router添加路由页面切换时的过渡动画,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
创新互联成立于2013年,是专业互联网技术服务公司,拥有项目成都网站建设、网站建设网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元永州做网站,已为上家服务,为永州各地企业和个人服务,联系电话:13518219792
使用过Vue2的同学们应该都知道
react-transition-group
我们需要借助React的官方动画库react-transition-group,文档戳这里
react-transition-group提供了三个React组件,分别是
:通过javascript动态修改style的方式为子元素添加动画,对比 多了几个编程式的props可以配置 :相比 多了一个classNames可以配置,通过引入CSS以及动态更改子元素className的方式为子元素添加动画(是不是像极了Vue里的 ) :顾名思义,为多个子元素添加动画,需要结合 或 使用
关于react-transititon-group与react-router的结合使用方式,官方文档里也给出了示例,但是直接拿来实现路由转场动画,我觉得方式并不够优雅。我还是更倾向于封装一个
编写过渡组件
实际代码也非常的简单
比如我们的路由长下面这个样子:
我们需要写一个
代码如下:
// AnimatedSwitch.less // 很多动画都需要给路由对应组件最外层元素设置position: absolute; .route { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } // 帧动画 .fade-enter { opacity: 0; } .fade-enter.fade-enter-active { opacity: 1; transition: opacity 300ms ease-in; } .fade-exit { opacity: 1; } .fade-exit.fade-exit-active { opacity: 0; transition: opacity 300ms ease-in; }
// AnimatedSwitch.js import React from 'react' import { TransitionGroup, CSSTransition } from 'react-transition-group' import { Route, Switch } from 'react-router-dom' import './AnimatedSwitch.less' const AnimatedSwitch = props => { const { children } = props return (( )} /> ) } export default AnimatedSwitch {children}
其中值得注意的是用到了
我们原有的JSX可以更换成如下结构:
以上是“怎么给React-Router添加路由页面切换时的过渡动画”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
文章题目:怎么给React-Router添加路由页面切换时的过渡动画
浏览路径:http://pwwzsj.com/article/jsghhg.html