react-router 路由切换动画的实现示例


Posted in Javascript onDecember 03, 2018

路由切换动画

因为项目的需求,需要在路由切换的时候,加入一些比较 zb 的视觉效果,所以研究了一下。把这些学习的过程记录下来,以便以后回顾。同时也希望这些内容能够帮助一些跟我一样的菜鸟,让他们少走些坑。可能我对代码的表述不是很到位,希望大家不要介意。机智的你们一定可以看明白。

参考内容:

  • react 路由动画
  • react-router Switch 组件
  • react 动画插件

1.插件依赖

使用的插件是react-transition-group。先简单介绍一下动画插件的使用方式。

CSSTransition这个组件有两个比较主要的属性:key和in

in:Boolean属性其实可以理解为是否显示当前内容节点。true则显示,false则不显示。

key:String这个属性是配合TransitionGroup组件来使用的。在一般的列表组件中(列如 todolist),可以通过key来判断列表中的子节点需要被插入还是移除,然后触发动画。

2. Switch 组件

这个组件有一个很重要的属性:location。同时这个属性也是路由切换动画的关键所在。Switch组件的子组件(一般是 Route 和 Redirect)会根据当前浏览器的location作为匹配依据来进行路由匹配。但是如果Switch组件定义了location属性,其中的子组件就会以定义的location作为匹配依据。

3.代码部分

import React, { Component } from 'react'
import { TransitionGroup, CSSTransition } from 'react-transition-group'
import { Switch, Route, withRouter } from 'react-router-dom'

@withRouter
class Routes extends Component {
  render() {
    const location = this.props.location
    return (
      <TransitionGroup>
        <CSSTransition key={location.key} timeout={1000} classNames="fade">
          <Switch location={location}>
            <Route path="/route-1" component={Route1} />
            <Route path="/route-2" component={Route2} />
          </Switch>
        </CSSTransition>
      </TransitionGroup>
    )
  }
}

export default Routes

4.原理分析

先确定需求:当切换路由的时候,旧的路由内容在一定时间内过渡消失,新的路由内容过渡显示。

在这个需要里面有两个重要的部分:

  • 过渡期间,会同时存在两个节点:新节点和旧节点
  • 旧节点应该显示旧的路由内容,新的节点应该显示新的路由内容

4.1 同时存在两节点

刚刚提到的CSSTransitionkey属性可以决定该节点是否需要显示。

Router中的location属性会在路由发生变化的时候,进行更新,而location里面的key则可以作为CSSTransitionkey

关于 history 对象,可以理解为一个数组,当页面的 location 发生变化时,或者刷新页面,history 就会push一个新的历史信息。在这个历史信息里面,有一个key属性,用来区分不同的历史记录(跳转新页面或者是刷新页面)

当路由切换的时候,location对象就会改变,新的key会使得页面重新渲染时出现两个CSSTransition(新旧节点)。

4.2 新旧节点对应新旧路由内容

如果只是配置key属性,会发现旧的节点会去匹配新的路由内容。这是因为Route组件默认根据当前location进行匹配。为了让旧节点中的Route根据旧的location进行匹配,就需要设置Switchlocation属性。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS保留小数点(四舍五入、四舍六入)实现思路及实例
Apr 25 Javascript
JSONP跨域的原理解析及其实现介绍
Mar 22 Javascript
JavaScript模拟重力状态下抛物运动的方法
Mar 03 Javascript
深入浅析AngularJS和DataModel
Feb 16 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
Feb 18 Javascript
Bootstrap实现水平排列的表单
Jul 04 Javascript
javascript比较语义化版本号的实现代码
Sep 09 Javascript
关于javascript事件响应的基础语法总结(必看篇)
Dec 26 Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
Jul 24 Javascript
ES6关于Promise的用法详解
May 07 Javascript
vue addRoutes实现动态权限路由菜单的示例
May 15 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
Jan 21 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
Dec 03 #Javascript
ng-zorro-antd 入门初体验
Dec 03 #Javascript
如何使用 vue + d3 画一棵树
Dec 03 #Javascript
Vue.js中 v-model 指令的修饰符详解
Dec 03 #Javascript
浅谈ng-zorro使用心得
Dec 03 #Javascript
JS跨域请求的问题解析
Dec 03 #Javascript
VueJS 组件参数名命名与组件属性转化问题
Dec 03 #Javascript
You might like
对javascript和select部件的结合运用
2006/10/09 PHP
PHP排序之二维数组的按照字母排序实现代码
2011/08/13 PHP
PHP error_log()将错误信息写入一个文件(定义和用法)
2013/10/25 PHP
ThinkPHP验证码使用简明教程
2014/03/05 PHP
php实现中文转数字
2016/02/18 PHP
PHP关键特性之命名空间实例详解
2017/05/06 PHP
PHP面向对象程序设计子类扩展父类(子类重新载入父类)操作详解
2019/06/14 PHP
Thinkphp 在api开发中异常返回依然是html的解决方式
2019/10/16 PHP
用js实现的检测浏览器和系统的函数
2009/04/09 Javascript
ext jquery 简单比较
2010/04/07 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
2014/08/16 Javascript
jquery实现的下拉和收缩效果示例
2014/08/21 Javascript
javascript入门之window对象【新手必看】
2016/11/22 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
2017/05/05 Javascript
jQuery实现选中行变色效果(实例讲解)
2017/07/06 jQuery
分享19个JavaScript 有用的简写写法
2017/07/07 Javascript
Node.js模块全局安装路径配置方法
2018/05/17 Javascript
jQuery实现图片简单轮播功能示例
2018/08/13 jQuery
vue2过滤器模糊查询方法
2018/09/16 Javascript
Vue.js 图标选择组件实践详解
2018/12/03 Javascript
Vue表单控件绑定图文详解
2019/02/11 Javascript
使用webpack4编译并压缩ES6代码的方法示例
2019/04/24 Javascript
使用JQuery自动完成插件Auto Complete详解
2019/06/18 jQuery
通过扫小程序码实现网站登陆功能
2019/08/22 Javascript
jQuery实时统计输入框字数及限制
2020/06/24 jQuery
[01:32:10]NAVI vs VG Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
python计算时间差的方法
2015/05/20 Python
python代码实现ID3决策树算法
2017/12/20 Python
python opencv将表格图片按照表格框线分割和识别
2019/10/30 Python
opencv resize图片为正方形尺寸的实现方法
2019/12/26 Python
使用K.function()调试keras操作
2020/06/17 Python
详解Sticky Footer 绝对底部的两种套路
2017/11/03 HTML / CSS
BabyBjörn婴儿背带法国官网:BabyBjorn法国
2018/06/16 全球购物
Lowe’s加拿大:家居装修、翻新和五金店
2019/12/06 全球购物
Yankee Candle官网:美国最畅销蜡烛品牌之一
2020/01/05 全球购物
小学生优秀作文范文(六篇)
2019/07/10 职场文书