详解如何给React-Router添加路由页面切换时的过渡动画

2023-08-24 05:39:05 60

PS:本篇文章使用的React-Router版本为react-router-dom:^5.0.0(兼容4.x)

使用过Vue2的同学们应该都知道这个内置组件，它可以帮我们添加过渡动画，之前一直用它来给Vue-Router路由的跳转添加转场动画，使用起来非常便捷。那在React中应该如何给路由切换添加过渡动画呢？

react-transition-group

我们需要借助React的官方动画库react-transition-group，文档戳这里

react-transition-group提供了三个React组件，分别是，以及，关于它们的详细api还请各位去查阅官方文档，这里只是简单介绍一下它们各自的用途：

：通过javascript动态修改style的方式为子元素添加动画，对比多了几个编程式的props可以配置
：相比多了一个classNames可以配置，通过引入CSS以及动态更改子元素className的方式为子元素添加动画（是不是像极了Vue里的）
：顾名思义，为多个子元素添加动画，需要结合或使用

关于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:opacity300msease-in;
}

.fade-exit{
opacity:1;
}

.fade-exit.fade-exit-active{
opacity:0;
transition:opacity300msease-in;
}

//AnimatedSwitch.js

importReactfrom'react'
import{TransitionGroup,CSSTransition}from'react-transition-group'
import{Route,Switch}from'react-router-dom'
import'./AnimatedSwitch.less'

constAnimatedSwitch=props=>{
const{children}=props
return(
(


{children}


)}
/>
)
}

exportdefaultAnimatedSwitch

其中值得注意的是用到了的render函数，我们需要用它将routeprops中的location传递给，使其具有动态更换子路由的能力。

我们原有的JSX可以更换成如下结构：

至此，一个简单的组件的编写就完成了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

详解如何给React-Router添加路由页面切换时的过渡动画

热门推荐

随机推荐