路由切换动画

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

参考内容:

1.插件依赖

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

CSSTransition这个组件有两个比较主要的属性:keyin

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.原理分析

先确定需求:当切换路由的时候,旧的路由内容在一定时间内过渡消失,新的路由内容过渡显示。
在这个需要里面有两个重要的部分:

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

4.1 同时存在两节点

刚刚提到的CSSTransitionkey属性可以决定该节点是否需要显示。
Router中的location属性会在路由发生变化的时候,进行更新,而location里面的key则可以作为CSSTransitionkey

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

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

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

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

来源:https://segmentfault.com/a/1190000017225809

react-router 路由切换动画的更多相关文章

  1. react实现页面切换动画效果

    一.前情概要 注:(我使用的路由是react-router4)     如下图所示,我们需要在页面切换时有一个过渡效果,这样就不会使页面切换显得生硬,用户体验大大提升:     but the 问题是 ...

  2. < react router>: (路由)

    < react router> (路由): 思维导图: Atrial   文件夹下的index.js 文件内容: import React, { Component } from 'rea ...

  3. React初识整理(四)--React Router(路由)

    官网:https://reacttraining.com/react-router 后端路由:主要做路径和方法的匹配,从而从后台获取相应的数据 前端路由:用于路径和组件的匹配,从而实现组件的切换. 如 ...

  4. vue3.x移动端页面基于vue-router的路由切换动画

    移动端页面切换一般都具有动画,我们既然要做混合开发,做完之后还是不能看起来就像一个网页,所以我们基于vue-router扩展了一个页面切换push和pop的动画.这是一篇比较硬核的帖子,作者花了不少精 ...

  5. react router路由传参

    今天,我们要讨论的是react router中Link传值的三种表现形式.分别为通过通配符传参.query传参和state传参. ps:进入正题前,先说明一下,以下的所有内容都是在react-rout ...

  6. 【react router路由】<Router> <Siwtch> <Route>标签

    博客 https://www.jianshu.com/p/ed5e56994f13?from=timeline 文档 http://react-guide.github.io/react-router ...

  7. react ---- Router路由的使用和页面跳转

    React-Router的中文文档可以参照如下链接: http://react-guide.github.io/react-router-cn/docs/Introduction.html 首先,我们 ...

  8. React Router路由传参方式总结

    首先我们要知道一个前提,路由传递的参数我们可以通过props里面的属性来获取.只要组件是被<Router>组件的<component>定义和指派的,这个组件自然就有了props ...

  9. 基于vux的Vue路由切换动画

    const history = window.sessionStorage history.clear() let historyCount = history.getItem('count') * ...

随机推荐

  1. 如何设计Restful风格的API

    RestfulAPI就是由后台(SERVER端)来提供接口,前端来调用.前端调用API向后台发起HTTP请求,后台响应请求将处理结果反馈给前端.也就是说Restful 是典型的基于HTTP的协议.那么 ...

  2. Fitness - 05.04

    倒计时241天 运动38分钟,共计9组.拉伸10分钟. 每组跑步2分钟(6.3KM/h),走路2分钟(6KM/h). 上午下了课,直奔健身房. 手机坏了,没有听音乐. 没有吃午饭,但是上午喝的咖啡还是 ...

  3. 【原】“Error getting 'android:label' attribute”

    项目上线过程中遇到“Error getting 'android:label' attribute: attribute is not a string value”这个错误. 备忘下:是因为有act ...

  4. Google Kick Start 2020 Round B T4 Wandering Robot

    题意 一个\(n \times m\)的矩形空间,起点是\((1,1)\),终点是\((n,m)\). 假设当前位于\((x,y)\): 如果当前位于最后一行,那么下一步只能走向\((x,y+1)\) ...

  5. 深度学习论文翻译解析(十三):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 ...

  6. Java 根据两个经纬度,得到两点距离

    private static final double EARTH_RADIUS = 6371000;//赤道半径(单位m)private static final double INTEGR_NUM ...

  7. 动手编写—动态数组(Java实现)

    目录 数组基础回顾 自定义动态数组 动态数组的设计 抽象父类接口设计 抽象父类设计 动态数组之DynamicArray 补充数组缩容 全局的关系图 声明 数组基础回顾 1.数组是一种常见的数据结构,用 ...

  8. elo system

    今天了解了一下游戏中的PVP模块的实现,大多数的游戏都使用到了ELO算法,刚开始的时候并不清楚这个算法是做什么的,对此开始大量查找有关于ELO算法的资源,功夫不负有心人,总算找到一些有用的资源了. 先 ...

  9. css常用属性:居中展示、内边距、外边距

    1.横向居中.纵向居中 2.纵向展示3个块级(div标签即可纵向展示) 3.横向展示3个块级 4.在横向块级上加上边框的两种方法 法一:在父级div上加上和样式一样高的height 法二:在父级div ...

  10. pytest(2):使用pycharm运行pytest

    pycharm运行 1.在pycharm里创建测试文件test_demo.py # Author xuejie zeng # encoding utf-8 # content of test_demo ...