详解如何给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制作浮动广告代码
Dec 30 Javascript
JavaScript 性能优化小结
Oct 12 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
Jan 06 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
Sep 29 Javascript
JS倒计时实例_天时分秒
Aug 22 Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
bootstrapTable+ajax加载数据 refresh更新数据
Aug 31 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
Jul 30 Javascript
js实现录音上传功能
Nov 22 Javascript
Node.js实现批量下载图片简单操作示例
Jan 18 Javascript
基于JavaScript实现控制下拉列表
May 08 Javascript
JavaScript位置参数实现原理及过程解析
Sep 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
2020年4月放送!《Princess Connect Re:Dive》制作组 & 角色声优公开!
2020/03/06 日漫
PHP Curl多线程原理实例详解
2013/11/06 PHP
开源php中文分词系统SCWS安装和使用实例
2014/04/11 PHP
Yii2 加载css、js 载静态资源的方法
2017/03/10 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
基于jquery的15款幻灯片插件
2011/04/10 Javascript
js取得url地址参数实例
2013/02/22 Javascript
jquery得到font-size属性值实现代码
2013/09/30 Javascript
js去除空格的12种实用方法
2013/11/08 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
2013/11/26 Javascript
JavaScript获取flash对象与网上的有所不同
2014/04/21 Javascript
js实现网页标题栏闪烁提示效果实例分析
2014/11/20 Javascript
js控制网页前进和后退的方法
2015/06/08 Javascript
基于javascript实现图片预加载
2016/01/05 Javascript
学习JavaScript设计模式之代理模式
2016/01/12 Javascript
Node.js 文件夹目录结构创建实例代码
2016/07/08 Javascript
jQuery事件用法详解
2016/10/06 Javascript
node通过express搭建自己的服务器
2017/09/30 Javascript
Vue三种常用传值示例(父传子、子传父、非父子)
2018/07/24 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
2019/01/27 Javascript
详解微信小程序-获取用户session_key,openid,unionid - 后端为nodejs
2019/04/29 NodeJs
node命令行工具之实现项目工程自动初始化的标准流程
2019/08/12 Javascript
[01:09:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第一场 6.2
2018/06/04 DOTA
Python中list查询及所需时间计算操作示例
2018/06/21 Python
python实现一个点绕另一个点旋转后的坐标
2019/12/04 Python
pytorch中torch.max和Tensor.view函数用法详解
2020/01/03 Python
使用canvas来完成线性渐变和径向渐变的功能的方法示例
2019/07/25 HTML / CSS
html5 制作地图当前定位箭头的方法示例
2020/01/10 HTML / CSS
Spanx塑身衣官网:美国知名内衣品牌
2017/01/11 全球购物
品质主管岗位职责
2014/03/16 职场文书
质量主管工作职责
2014/09/26 职场文书
2014年政风行风自查自纠报告
2014/10/21 职场文书
2015年监理个人工作总结
2015/05/23 职场文书
治理商业贿赂工作总结
2015/08/10 职场文书
2016抗战胜利71周年红领巾广播稿
2015/12/18 职场文书
如何避免mysql启动时错误及sock文件作用分析
2022/01/22 MySQL