详解如何给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 相关文章推荐
onsubmit阻止form表单提交与onclick的相关操作
Sep 03 Javascript
javascrip客户端验证文件大小及文件类型并重置上传
Jan 12 Javascript
js data日期初始化的5种方法
Dec 29 Javascript
js由下向上不断上升冒气泡效果实例
May 07 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
Feb 24 Javascript
JS二叉树的简单实现方法示例
Apr 05 Javascript
利用vueJs实现图片轮播实例代码
Jun 03 Javascript
vue使用echarts图表的详细方法
Oct 22 Javascript
Vue表单控件绑定图文详解
Feb 11 Javascript
Vue 使用formData方式向后台发送数据的实现
Apr 14 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
Jun 27 Javascript
微信小程序实现写入读取缓存详解
Aug 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
第十节--抽象方法和抽象类
2006/11/16 PHP
php 的加密函数 md5,crypt,base64_encode 等使用介绍
2012/04/09 PHP
PHP的运行机制与原理(底层)
2015/11/16 PHP
yii2使用GridView实现数据全选及批量删除按钮示例
2017/03/01 PHP
PHP运用foreach神奇的转换数组(实例讲解)
2018/02/01 PHP
PHP检查端口是否可以被绑定的方法示例
2018/08/09 PHP
解决Laravel blade模板转义html标签的问题
2019/09/03 PHP
jquery简单实现滚动条下拉DIV固定在头部不动
2013/11/25 Javascript
JsRender for index循环索引用法详解
2014/10/31 Javascript
浅析javascript 定时器
2014/12/23 Javascript
详解AngularJS Filter(过滤器)用法
2015/12/28 Javascript
简述Matlab中size()函数的用法
2016/03/20 Javascript
JavaScript实现的微信二维码图片生成器的示例
2016/10/26 Javascript
JS实现移动端按首字母检索城市列表附源码下载
2017/07/05 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
2017/08/01 Javascript
nodejs动态创建二维码的方法
2017/08/12 NodeJs
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
2018/01/25 jQuery
Vue项目中设置背景图片方法
2018/02/21 Javascript
Vue利用canvas实现移动端手写板的方法
2018/05/03 Javascript
vue初始化动画加载的实例
2018/09/01 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
2019/04/20 Javascript
微信小程序动态添加和删除组件的现实
2020/02/28 Javascript
js实现前端界面导航栏下拉列表
2020/08/27 Javascript
Python中用于计算对数的log()方法
2015/05/15 Python
python网络编程调用recv函数完整接收数据的三种方法
2017/03/31 Python
利用matplotlib+numpy绘制多种绘图的方法实例
2017/05/03 Python
Python创建对称矩阵的方法示例【基于numpy模块】
2017/10/12 Python
利用TensorFlow训练简单的二分类神经网络模型的方法
2018/03/05 Python
pandas string转dataframe的方法
2018/04/11 Python
H5 canvas中width、height和style的宽高区别详解
2018/11/02 HTML / CSS
HTML5中语义化 b 和 i 标签
2008/10/17 HTML / CSS
音乐系毕业生自荐信
2013/10/27 职场文书
2014最新实习证明模板
2014/10/02 职场文书
招商引资工作汇报材料
2014/10/28 职场文书
李强为自己工作观后感
2015/06/11 职场文书
Python IO文件管理的具体使用
2022/03/20 Python