react-router 路由切换动画
路由切换动画
因为项目的需求,需要在路由切换的时候,加入一些比较 zb 的视觉效果,所以研究了一下。把这些学习的过程记录下来,以便以后回顾。同时也希望这些内容能够帮助一些跟我一样的菜鸟,让他们少走些坑。可能我对代码的表述不是很到位,希望大家不要介意。机智的你们一定可以看明白。
参考内容:
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 同时存在两节点
刚刚提到的CSSTransition
的key
属性可以决定该节点是否需要显示。
而Router
中的location
属性会在路由发生变化的时候,进行更新,而location
里面的key
则可以作为CSSTransition
的key
。
关于 history 对象,可以理解为一个数组,当页面的 location 发生变化时,或者刷新页面,history 就会
push
一个新的历史信息。在这个历史信息里面,有一个key
属性,用来区分不同的历史记录(跳转新页面或者是刷新页面)
当路由切换的时候,location
对象就会改变,新的key
会使得页面重新渲染时出现两个CSSTransition
(新旧节点)。
4.2 新旧节点对应新旧路由内容
如果只是配置key
属性,会发现旧的节点会去匹配新的路由内容。这是因为Route
组件默认根据当前location
进行匹配。为了让旧节点中的Route
根据旧的location
进行匹配,就需要设置Switch
的location
属性。
来源:https://segmentfault.com/a/1190000017225809
react-router 路由切换动画的更多相关文章
- react实现页面切换动画效果
一.前情概要 注:(我使用的路由是react-router4) 如下图所示,我们需要在页面切换时有一个过渡效果,这样就不会使页面切换显得生硬,用户体验大大提升: but the 问题是 ...
- < react router>: (路由)
< react router> (路由): 思维导图: Atrial 文件夹下的index.js 文件内容: import React, { Component } from 'rea ...
- React初识整理(四)--React Router(路由)
官网:https://reacttraining.com/react-router 后端路由:主要做路径和方法的匹配,从而从后台获取相应的数据 前端路由:用于路径和组件的匹配,从而实现组件的切换. 如 ...
- vue3.x移动端页面基于vue-router的路由切换动画
移动端页面切换一般都具有动画,我们既然要做混合开发,做完之后还是不能看起来就像一个网页,所以我们基于vue-router扩展了一个页面切换push和pop的动画.这是一篇比较硬核的帖子,作者花了不少精 ...
- react router路由传参
今天,我们要讨论的是react router中Link传值的三种表现形式.分别为通过通配符传参.query传参和state传参. ps:进入正题前,先说明一下,以下的所有内容都是在react-rout ...
- 【react router路由】<Router> <Siwtch> <Route>标签
博客 https://www.jianshu.com/p/ed5e56994f13?from=timeline 文档 http://react-guide.github.io/react-router ...
- react ---- Router路由的使用和页面跳转
React-Router的中文文档可以参照如下链接: http://react-guide.github.io/react-router-cn/docs/Introduction.html 首先,我们 ...
- React Router路由传参方式总结
首先我们要知道一个前提,路由传递的参数我们可以通过props里面的属性来获取.只要组件是被<Router>组件的<component>定义和指派的,这个组件自然就有了props ...
- 基于vux的Vue路由切换动画
const history = window.sessionStorage history.clear() let historyCount = history.getItem('count') * ...
随机推荐
- 牛客网PAT练兵场-查验身份证
题解:模拟题,直接算 题目地址:https://www.nowcoder.com/questionTerminal/779a72a420744b1d9c0ec7b7a8dd8f39 /** * *作者 ...
- 算法专题 | 10行代码实现的最短路算法——Bellman-ford与SPFA
今天是算法数据结构专题的第33篇文章,我们一起来聊聊最短路问题. 最短路问题也属于图论算法之一,解决的是在一张有向图当中点与点之间的最短距离问题.最短路算法有很多,比较常用的有bellman-ford ...
- 前后端API交互如何保证数据安全性?
前言 前后端分离的开发方式,我们以接口为标准来进行推动,定义好接口,各自开发自己的功能,最后进行联调整合.无论是开发原生的APP还是webapp还是PC端的软件,只要是前后端分离的模式,就避免不了调用 ...
- 再爆安全漏洞,这次轮到Jackson了,竟由阿里云上报
冤冤相报何时了,得饶人处且饶人.本文已被 https://www.yourbatman.cn 收录,里面一并有Spring技术栈.MyBatis.JVM.中间件等小而美的专栏供以免费学习.关注公众号[ ...
- Web测试和前端技术
Html Form表单 用户需要输入内容的地方一般有一个表单元素 method:GET/POST action:要打开/提交的目文件 Table表格 检查表格数据和数据库的一致性 表格的布局检测:填满 ...
- linux的五种IO模型
概念: 同步.异步.阻塞.非阻塞的概念 同步:所谓同步,发起一个功能调用的时候,在没有得到结果之前,该调用不返回,也就是必须一件事一件事的做,等前一件做完了,才能做下一件. 提交请求->等待服务 ...
- C# 转化成 json ,特殊字符的处理
//1.定义string jsonText0= "{\"beijing\":{\"zkkke\":\"2222\",\" ...
- 浅谈在win server2012 R2操作系统上安装mysql odbc数据源遇到的问题 -九五小庞
一,服务器系统 Windows Server 2012 R2 二,安装odbc数据源出现的问题 三,步骤二 中的问题,是因为缺少微软常用运行库.需要安装一下运行库 四,安装odbc数据源 安装MySQ ...
- .NET Core表达式树的梳理
最近要重写公司自己开发的ORM框架:其中有一部分就是查询的动态表达式:于是对这方面的东西做了一个简单的梳理 官网的解释: 表达式树以树形数据结构表示代码,其中每一个节点都是一种表达式,比如方法调用和 ...
- python之unittest框架使用
一.unittest框架 unittest属于python内置的单元测试框架. 二.unittest框架的核心概念 test case:指测试用例.unittest中提供了一个基本类TestCase, ...