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') * ...
随机推荐
- 如何设计Restful风格的API
RestfulAPI就是由后台(SERVER端)来提供接口,前端来调用.前端调用API向后台发起HTTP请求,后台响应请求将处理结果反馈给前端.也就是说Restful 是典型的基于HTTP的协议.那么 ...
- Fitness - 05.04
倒计时241天 运动38分钟,共计9组.拉伸10分钟. 每组跑步2分钟(6.3KM/h),走路2分钟(6KM/h). 上午下了课,直奔健身房. 手机坏了,没有听音乐. 没有吃午饭,但是上午喝的咖啡还是 ...
- 【原】“Error getting 'android:label' attribute”
项目上线过程中遇到“Error getting 'android:label' attribute: attribute is not a string value”这个错误. 备忘下:是因为有act ...
- Google Kick Start 2020 Round B T4 Wandering Robot
题意 一个\(n \times m\)的矩形空间,起点是\((1,1)\),终点是\((n,m)\). 假设当前位于\((x,y)\): 如果当前位于最后一行,那么下一步只能走向\((x,y+1)\) ...
- 深度学习论文翻译解析(十三):Faster R-CNN: Towards Real-Time Object Detection with Region Proposal Networks
论文标题:Faster R-CNN: Towards Real-Time Object Detection with Region Proposal Networks 标题翻译:基于区域提议(Regi ...
- Java 根据两个经纬度,得到两点距离
private static final double EARTH_RADIUS = 6371000;//赤道半径(单位m)private static final double INTEGR_NUM ...
- 动手编写—动态数组(Java实现)
目录 数组基础回顾 自定义动态数组 动态数组的设计 抽象父类接口设计 抽象父类设计 动态数组之DynamicArray 补充数组缩容 全局的关系图 声明 数组基础回顾 1.数组是一种常见的数据结构,用 ...
- elo system
今天了解了一下游戏中的PVP模块的实现,大多数的游戏都使用到了ELO算法,刚开始的时候并不清楚这个算法是做什么的,对此开始大量查找有关于ELO算法的资源,功夫不负有心人,总算找到一些有用的资源了. 先 ...
- css常用属性:居中展示、内边距、外边距
1.横向居中.纵向居中 2.纵向展示3个块级(div标签即可纵向展示) 3.横向展示3个块级 4.在横向块级上加上边框的两种方法 法一:在父级div上加上和样式一样高的height 法二:在父级div ...
- pytest(2):使用pycharm运行pytest
pycharm运行 1.在pycharm里创建测试文件test_demo.py # Author xuejie zeng # encoding utf-8 # content of test_demo ...