详解如何给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 原型学习总结
Oct 29 Javascript
js函数的延迟加载实现代码
Oct 11 Javascript
js中文逗号转英文实现
Feb 11 Javascript
一个js过滤空格的小函数
Oct 10 Javascript
jQuery中ajax和post处理json的不同示例对比
Nov 02 Javascript
jquery获取select选中值的方法分析
Dec 22 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
Nov 22 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
Nov 14 Javascript
深入理解vue中的slot与slot-scope
Apr 22 Javascript
react 生命周期实例分析
May 18 Javascript
ReactRouter的实现方法
Jan 25 Javascript
TypeScript中条件类型精读与实践记录
Oct 05 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实现的生成静态HTML速度快类库
2007/03/31 PHP
PHP5+UTF8多文件上传类
2008/10/17 PHP
一步一步学习PHP(1) php开发环境配置
2010/02/15 PHP
PHP实现批量上传单个文件
2015/12/29 PHP
php获取数据库结果集方法(推荐)
2017/06/01 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
PHP中散列密码的安全性分析
2019/07/26 PHP
javascript笔记 String类replace函数的一些事
2011/09/22 Javascript
JQquery的一些使用心得分享
2012/08/01 Javascript
jquery 倒计时效果实现秒杀思路
2013/09/11 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
2015/01/02 Javascript
JavaScript的事件代理和委托实例分析
2015/03/25 Javascript
深入理解JavaScript中的对象复制(Object Clone)
2016/05/18 Javascript
javascript jquery对form元素的常见操作详解
2016/06/12 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
2016/07/04 Javascript
功能强大的Bootstrap效果展示(二)
2016/08/03 Javascript
js实现上下左右弹框划出效果
2017/03/08 Javascript
react-router4 嵌套路由的使用方法
2017/07/24 Javascript
微信小程序手机号码验证功能的实例代码
2018/08/28 Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
2019/08/02 jQuery
详解mpvue开发微信小程序基础知识
2019/09/23 Javascript
JavaScript实现英语单词题库
2019/12/24 Javascript
JS使用Chrome浏览器实现调试线上代码
2020/07/23 Javascript
Vue实现点击导航栏当前标签后变色功能
2020/08/19 Javascript
[35:34]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python使用字典的嵌套功能详解
2019/02/27 Python
python获取磁盘号下盘符步骤详解
2019/06/19 Python
Django框架模板用法入门教程
2019/11/04 Python
python 生成任意形状的凸包图代码
2020/04/16 Python
详解Python中import机制
2020/09/11 Python
浅析Python 中的 WSGI 接口和 WSGI 服务的运行
2020/12/09 Python
扬尘污染防治方案
2014/06/15 职场文书
医院领导班子四风对照检查材料
2014/09/27 职场文书
2015年安全生产工作总结范文
2015/04/02 职场文书
特种设备安全管理制度
2015/08/06 职场文书
写作之关于描写老人的好段摘抄
2019/11/14 职场文书