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


Posted in Javascript onApril 25, 2019

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

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

react-transition-group

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

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

  • <Transition>:通过javascript动态修改style的方式为子元素添加动画,对比<CSSTransiton>多了几个编程式的props可以配置
  • <CSSTransition>:相比<Transition>多了一个classNames可以配置,通过引入CSS以及动态更改子元素className的方式为子元素添加动画(是不是像极了Vue里的<transition>)
  • <TranstionGroup>:顾名思义,为多个子元素添加动画,需要结合<Transition>或<CSSTransition>使用

关于react-transititon-group与react-router的结合使用方式,官方文档里也给出了示例,但是直接拿来实现路由转场动画,我觉得方式并不够优雅。我还是更倾向于封装一个<AnimatedSwitch>组件来替换react-router自带的<Switch>组件来实现路由跳转时的转场动画。

编写过渡组件

实际代码也非常的简单

比如我们的路由长下面这个样子:

<!-- App.js -->

<Switch>
  <Route exact path="/login" component={Login} />
  <Route exact path="/register" component={Register} />
  <Route exact path="/" component={Home} />
</Switch>

我们需要写一个<AnimatedSwitch>来实现<Switch>的功能还要给路由跳转添加动画,其实也就是在<Swtich>外部用<CSSTransition>和<TranstionGroup>再封装一层。

代码如下:

// 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 (
    <Route
      render={({ location }) => (
        <TransitionGroup>
          <CSSTransition
            key={location.key}
            classNames={props.type || 'fade'} 
            timeout={props.duration || 300}
          >
            <Switch location={location}>{children}</Switch>
          </CSSTransition>
        </TransitionGroup>
      )}
    />
  )
}

export default AnimatedSwitch

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

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

<!-- App.js -->

<AnimatedSwitch>
  <Route exact path="/login" component={Login} />
  <Route exact path="/register" component={Register} />
  <Route exact path="/" component={Home} />
</AnimatedSwitch>

至此,一个简单的<AnimatedSwitch>组件的编写就完成了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript获得地址栏参数的两种方法
Nov 08 Javascript
js中将URL中的参数提取出来作为对象的实现代码
Aug 16 Javascript
JS实现图片预加载无需等待
Dec 21 Javascript
JS中 用户登录系统的解决办法
Apr 15 Javascript
通过js来制作复选框的全选和不选效果
May 22 Javascript
javascript 实现 原路返回
Jan 21 Javascript
jQuery蓝色风格滑动导航栏代码分享
Aug 19 Javascript
AngularJS中处理多个promise的方式
Feb 02 Javascript
webix+springmvc session超时跳转登录页面
Oct 30 Javascript
Vue2.0 vue-source jsonp 跨域请求
Aug 04 Javascript
快速了解vue-cli 3.0 新特性
Feb 28 Javascript
JavaScript实现简单的音乐播放器
Aug 14 Javascript
vue项目中使用fetch的实现方法
Apr 25 #Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
Apr 25 #Javascript
微信小程序遍历Echarts图表实现多个饼图
Apr 25 #Javascript
在微信小程序中使用图表的方法示例
Apr 25 #Javascript
详解VUE Element-UI多级菜单动态渲染的组件
Apr 25 #Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
Apr 25 #Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
Apr 25 #Javascript
You might like
关于查看MSSQL 数据库 用户每个表 占用的空间大小
2013/06/21 PHP
使用HMAC-SHA1签名方法详解
2013/06/26 PHP
PHP制作用户注册系统
2015/10/23 PHP
PHP框架Laravel学习心得体会
2015/10/28 PHP
jquery multiSelect 多选下拉框
2010/07/09 Javascript
用jquery实现点击栏目背景色改变
2012/12/10 Javascript
img onload事件绑定各浏览器均可执行
2012/12/19 Javascript
php中给js数组赋值方法
2014/03/10 Javascript
对比分析json及XML
2014/11/28 Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
2015/08/21 Javascript
AngularJS+Node.js实现在线聊天室
2015/08/28 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
2016/06/01 Javascript
微信小程序 教程之wxapp视图容器 swiper
2016/10/19 Javascript
解决Angular.Js与Django标签冲突的方案
2016/12/20 Javascript
完美实现js拖拽效果 return false用法详解
2017/07/28 Javascript
swiper 解决动态加载数据滑动失效的问题
2018/02/26 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
2018/11/21 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
2019/03/19 Javascript
详解如何在JS代码中消灭for循环
2019/12/11 Javascript
JavaScript享元模式原理与用法实例详解
2020/03/09 Javascript
[59:00]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第一场 3月7日
2021/03/11 DOTA
python使用minimax算法实现五子棋
2019/07/29 Python
python数组循环处理方法
2019/08/26 Python
Jupyter Notebook 文件默认目录的查看以及更改步骤
2020/04/14 Python
css3之UI元素状态伪类选择器实例演示
2017/08/11 HTML / CSS
会计毕业生求职简历的自我评价
2013/10/20 职场文书
土木工程专业推荐信
2014/02/19 职场文书
《东方明珠》教学反思
2014/04/20 职场文书
教师求职自荐书
2014/06/14 职场文书
社会学专业求职信
2014/07/17 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话全文
2014/10/25 职场文书
事业单位个人查摆问题及整改措施
2014/10/28 职场文书
简历自我评价模板
2015/03/11 职场文书
初二数学教学反思
2016/02/17 职场文书
python numpy中setdiff1d的用法说明
2021/04/22 Python
关于mysql中string和number的转换问题
2022/06/14 MySQL