小编给大家分享一下怎么给React-Router添加路由页面切换时的过渡动画，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
创新互联是一家成都网站建设、
网站建设，提供网页设计，网站设计，网站制作，建网站，按需制作网站，网站开发公司，从2013年创立是互联行业建设者，服务者。以提升客户品牌价值为核心业务，全程参与项目的网站策划设计制作，前端开发，后台程序制作以及后期项目运营并提出专业建议和思路。
使用过Vue2的同学们应该都知道这个内置组件，它可以帮我们添加过渡动画，之前一直用它来给Vue-Router路由的跳转添加转场动画，使用起来非常便捷。那在React中应该如何给路由切换添加过渡动画呢？
react-transition-group
我们需要借助React的官方动画库react-transition-group，文档戳这里
react-transition-group提供了三个React组件，分别是，以及，关于它们的详细api还请各位去查阅官方文档，这里只是简单介绍一下它们各自的用途：
关于react-transititon-group与react-router的结合使用方式，官方文档里也给出了示例，但是直接拿来实现路由转场动画，我觉得方式并不够优雅。我还是更倾向于封装一个组件来替换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 (
(
{children}
)}
/>
)
}
export default AnimatedSwitch其中值得注意的是用到了的render函数，我们需要用它将route props中的location传递给，使其具有动态更换子路由的能力。
我们原有的JSX可以更换成如下结构：
以上是“怎么给React-Router添加路由页面切换时的过渡动画”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联成都网站设计公司行业资讯频道！
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
文章标题：怎么给React-Router添加路由页面切换时的过渡动画-创新互联
转载来于：
http://cxhlcq.com/article/djcgie.html
重庆分公司
重庆分公司
