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 相关文章推荐
初窥JQuery(一)jquery选择符 必备知识点
Nov 25 Javascript
JsDom 编程小结
Aug 09 Javascript
兼容FF和IE的动态table示例自写
Oct 21 Javascript
javascript操作excel生成报表全攻略
May 04 Javascript
js图片自动轮播代码分享(js图片轮播)
May 06 Javascript
jquery结合CSS使用validate实现漂亮的验证
Jan 29 Javascript
jquery代码实现多选、不同分享功能
Jul 31 Javascript
d3.js中冷门却实用的内置函数总结
Feb 04 Javascript
angular学习之动态创建表单的方法
Dec 07 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
Aug 12 Javascript
node express使用HTML模板的方法示例
Aug 22 Javascript
使用原生javascript开发计算器实例代码
Feb 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
重置版宣传动画
2020/04/09 魔兽争霸
PHP执行linux系统命令的常用函数使用说明
2010/04/27 PHP
php中inlcude()性能对比详解
2012/09/16 PHP
使用Curl进行抓取远程内容时url中文编码问题示例探讨
2013/10/29 PHP
php7安装mongoDB扩展的方法分析
2017/08/02 PHP
Laravel 解决composer相关操作提示php相关异常的问题
2019/10/23 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
javascript当中的代码嗅探扩展原生对象和原型(prototype)
2013/01/11 Javascript
js post提交调用方法
2014/02/12 Javascript
jquery实现checkbox 全选/全不选的通用写法
2014/02/22 Javascript
把jQuery的类、插件封装成seajs的模块的方法
2014/03/12 Javascript
jQuery遍历json中多个map的方法
2015/02/12 Javascript
javascript的 {} 语句块详解
2016/02/27 Javascript
完美解决浏览器跨域的几种方法(汇总)
2017/05/08 Javascript
详解vue-cli 脚手架项目-package.json
2017/07/04 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
2017/10/31 Javascript
用Vue写一个分页器的示例代码
2018/04/22 Javascript
[06:13]DOTA2进化论(修改版)
2013/10/08 DOTA
[02:49]DAC2018决赛日TOP5 LGD开启黑暗之门绝杀VP
2018/04/08 DOTA
[03:08]TI9战队档案 - Vici Gaming
2019/08/20 DOTA
python Crypto模块的安装与使用方法
2017/12/21 Python
Python使用pickle模块实现序列化功能示例
2018/07/13 Python
基于TensorFlow常量、序列以及随机值生成实例
2020/01/04 Python
TensorBoard 计算图的查看方式
2020/02/15 Python
解决Python Matplotlib绘图数据点位置错乱问题
2020/05/16 Python
PyCharm Community安装与配置的详细教程
2020/11/24 Python
如何使用python-opencv批量生成带噪点噪线的数字验证码
2020/12/21 Python
Html5之自定义属性(data-,dataset)
2019/11/19 HTML / CSS
全球知名巧克力品牌:Godiva
2016/07/22 全球购物
假日旅行社实习自我鉴定
2013/09/24 职场文书
我读书我快乐演讲稿
2014/05/07 职场文书
售后服务承诺书怎么写
2014/05/21 职场文书
2016领导干部廉洁自律心得体会
2016/01/13 职场文书
2016年幼儿园庆六一开幕词
2016/03/04 职场文书
python生成随机数、随机字符、随机字符串
2021/04/06 Python
Nginx 配置 HTTPS的详细过程
2022/05/30 Servers