详解如何给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 验证码的实例代码(附效果图)
Mar 22 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
Nov 07 Javascript
解决jquery1.9不支持browser对象的问题
Nov 13 Javascript
Js 正则表达式知识汇总
Dec 02 Javascript
如何在Linux上安装Node.js
Apr 01 Javascript
全面解析bootstrap格子布局
May 22 Javascript
将JSON字符串转换成Map对象的方法
Nov 30 Javascript
JavaScript模拟实现封装的三种方式及写法区别
Oct 27 Javascript
浅析Visual Studio Code断点调试Vue
Feb 27 Javascript
swiper4实现移动端导航切换
Oct 16 Javascript
jquery实现上传文件进度条
Mar 26 jQuery
详解ES6实现类的私有变量的几种写法
Feb 10 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
linux下安装php的memcached客户端
2014/08/03 PHP
PHP中使用php://input处理相同name值的表单数据
2015/02/03 PHP
php根据某字段对多维数组进行排序的方法
2015/03/07 PHP
PHP实现全角字符转为半角方法汇总
2015/07/09 PHP
如何使用PHP对网站验证码进行破解
2015/09/17 PHP
ThinkPHP 整合Bootstrap Ajax分页样式
2016/12/23 PHP
关于php 高并发解决的一点思路
2017/04/16 PHP
再谈IE中Flash控件的自动激活 ObjectWrap
2007/03/09 Javascript
基于jquery自定义图片热区效果
2012/07/21 Javascript
JavaScript定义类的几种方式总结
2014/01/06 Javascript
如何编写高质量JS代码
2014/12/28 Javascript
详解JavaScript基本类型和引用类型
2015/12/09 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
2016/09/19 Javascript
基于Bootstrap的网页设计实例
2017/03/01 Javascript
微信小程序 商城开发(ecshop )简单实例
2017/04/07 Javascript
react native仿微信PopupWindow效果的实例代码
2017/08/07 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
2018/02/27 Javascript
vue-i18n实现中英文切换的方法
2020/07/06 Javascript
[00:32]DOTA2上海特级锦标赛 COL战队宣传片
2016/03/04 DOTA
Python和php通信乱码问题解决方法
2014/04/15 Python
python实现在每个独立进程中运行一个函数的方法
2015/04/23 Python
常用python编程模板汇总
2016/02/12 Python
Python基于Flask框架配置依赖包信息的项目迁移部署
2018/03/02 Python
python+selenium打印当前页面的titl和url方法
2018/06/22 Python
详解Python的hasattr() getattr() setattr() 函数使用方法
2018/07/09 Python
tensorflow: variable的值与variable.read_value()的值区别详解
2018/07/30 Python
Python简单实现区域生长方式
2020/01/16 Python
Python使用requests xpath 并开启多线程爬取西刺代理ip实例
2020/03/06 Python
英国最受欢迎的在线隐形眼镜商店:VisionDirect.co.uk
2018/12/06 全球购物
琳达·法罗眼镜英国官网:Linda Farrow英国
2021/01/19 全球购物
如何估计一张表的大小(假设该表中有1万条数据)
2016/03/27 面试题
请问软件开发中的设计模式你会使用哪些
2015/05/13 面试题
员工培训邀请函
2014/02/02 职场文书
单位承诺书格式
2014/05/21 职场文书
公司市场专员岗位职责
2014/06/29 职场文书
CSS三大特性继承性、层叠性和优先级详解
2022/01/18 HTML / CSS