详解如何给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 parseInt字符转化为数字函数使用小结
Nov 05 Javascript
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
Feb 03 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
Oct 21 Javascript
Bootstrap精简教程
Nov 27 Javascript
jQuery Html控件基本操作(日常收集整理)
Mar 11 Javascript
基于JavaScript实现轮播图代码
Jul 14 Javascript
vue模板语法-插值详解
Mar 06 Javascript
前端构建工具之gulp的配置与搭建详解
Jun 12 Javascript
小程序自定义组件实现城市选择功能
Jul 18 Javascript
vue-cli3 karma单元测试的实现
Jan 18 Javascript
Vue中UI组件库之Vuex与虚拟服务器初识
May 07 Javascript
Vue 实现拨打电话操作
Nov 16 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
优化NFR之一 --MSSQL Hello Buffer Overflow
2006/10/09 PHP
PHP连接MSSQL方法汇总
2016/02/05 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
从新浪弄下来的全屏广告代码 与使用说明
2007/03/15 Javascript
javascript引导程序
2008/10/26 Javascript
禁止你的左键复制实用技巧
2013/01/04 Javascript
利用JS进行图片的切换即特效展示图片
2013/12/03 Javascript
jQuery中width()方法用法实例
2014/12/24 Javascript
jquery中checkbox全选失效的解决方法
2014/12/26 Javascript
简介JavaScript中search()方法的使用
2015/06/06 Javascript
js控制网页前进和后退的方法
2015/06/08 Javascript
原生javascript实现图片无缝滚动效果
2016/02/12 Javascript
最简单的tab切换实例代码
2016/05/13 Javascript
浅析JavaScript回调函数应用
2016/05/22 Javascript
angularJS深拷贝详解
2017/03/23 Javascript
jQuery动态追加页面数据以及事件委托详解
2017/05/06 jQuery
浅析JS中常用类型转换及运算符表达式
2017/07/23 Javascript
AngularJs 禁止模板缓存的方法
2017/11/28 Javascript
Vue拖拽组件开发实例详解
2018/05/11 Javascript
JS中验证整数和小数的正则表达式
2018/10/08 Javascript
详解在网页上通过JS实现文本的语音朗读
2019/03/28 Javascript
使用vue for时为什么要key【推荐】
2019/07/11 Javascript
原生js实现html手机端城市列表索引选择城市
2020/06/24 Javascript
[58:15]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 NB vs Liquid
2018/04/02 DOTA
[50:54]完美世界DOTA2联赛 GXR vs IO 第三场 11.07
2020/11/10 DOTA
Python 安装第三方库 pip install 安装慢安装不上的解决办法
2019/06/18 Python
详解Python 函数参数的拆解
2020/09/02 Python
Python实现树莓派摄像头持续录像并传送到主机的步骤
2020/11/30 Python
北欧最好的童装网上商店:Babyshop
2019/09/15 全球购物
澳大利亚领先的时尚内衣零售商:Bras N Things
2020/07/28 全球购物
奥地利手表、香水、化妆品和珠宝购物网站:Brasty.at
2021/01/17 全球购物
运动会加油稿20字
2014/11/15 职场文书
焦裕禄观后感
2015/06/03 职场文书
2016年“9.22”世界无车日活动小结
2016/04/05 职场文书
六种css3实现的边框过渡效果
2021/04/22 HTML / CSS
浅谈react useEffect闭包的坑
2021/06/08 Javascript