详解如何给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的类型简单说明
Sep 03 Javascript
JS中把字符转成ASCII值的函数示例代码
Nov 21 Javascript
JavaScript function 的 length 属性使用介绍
Sep 15 Javascript
实例分析javascript中的call()和apply()方法
Nov 28 Javascript
原生js和jquery实现图片轮播淡入淡出效果
Apr 23 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
May 16 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
Oct 08 Javascript
vue 2.0路由之路由嵌套示例详解
May 08 Javascript
javaScript封装的各种写法
Aug 14 Javascript
vue2.0之多页面的开发的示例
Jan 30 Javascript
微信小程序实现下拉刷新动画
Jun 21 Javascript
vue实现中部导航栏布局功能
Jul 30 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
php 获取mysql数据库信息代码
2009/03/12 PHP
php foreach 参数强制类型转换的问题
2010/12/10 PHP
php警告Creating default object from empty value 问题的解决方法
2014/04/02 PHP
PHP实现文件下载断点续传详解
2014/10/15 PHP
Yii基于数组和对象的Model查询技巧实例详解
2015/12/28 PHP
[原创]php使用strpos判断字符串中数字类型子字符串出错的解决方法
2017/04/01 PHP
PHP实现将优酷土豆腾讯视频html地址转换成flash swf地址的方法
2017/08/04 PHP
js对数字的格式化使用说明
2011/01/12 Javascript
JQuery筛选器全系列介绍
2013/08/27 Javascript
判断输入是否为空,获得输入类型的JS代码
2013/10/30 Javascript
javascript操作css属性
2013/12/30 Javascript
javascript中的undefined和not defined区别示例介绍
2014/02/26 Javascript
js获取UserControl内容为拼html时提供方便
2014/11/02 Javascript
javascript 获取浏览器版本
2015/01/21 Javascript
javascript实现3D切换焦点图
2015/10/16 Javascript
jQuery 获取页面li数组并删除不在数组中的key
2016/08/02 Javascript
详解Vue2 无限级分类(添加,删除,修改)
2017/03/07 Javascript
vue将时间戳转换成自定义时间格式的方法
2018/03/02 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
2018/08/07 Javascript
js中实例与对象的区别讲解
2019/01/21 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
2019/03/06 Javascript
js实现电灯开关效果
2021/01/19 Javascript
PyQT实现多窗口切换
2018/04/20 Python
利用Django-environ如何区分不同环境
2018/08/26 Python
python使用插值法画出平滑曲线
2018/12/15 Python
Pandas-Cookbook 时间戳处理方式
2019/12/07 Python
Python列表解析操作实例总结
2020/02/26 Python
快速解决pymongo操作mongodb的时区问题
2020/12/05 Python
Python字符串的15个基本操作(小结)
2021/02/03 Python
化工见习报告范文
2014/10/31 职场文书
九寨沟导游词
2015/02/02 职场文书
绍兴鲁迅故居导游词
2015/02/09 职场文书
应聘教师求职信范文
2015/03/20 职场文书
2015年度个人思想工作总结
2015/04/08 职场文书
2015年信贷员工作总结
2015/04/28 职场文书
小学感恩主题班会
2015/08/12 职场文书