路由切换动画

因为项目的需求,需要在路由切换的时候,加入一些比较 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. 必看!2020最新黑马JAVA 学习路线

    https://www.fang1688.cn/2020/08/24/%e5%bf%85%e7%9c%8b%ef%bc%81java-%e5%ad%a6%e4%b9%a0%e8%b7%af%e7%ba ...

  2. JdbcTemplate jar包 下载

    我给了一个链接, 是jar download网站上的. 能上去的就可以下载. https://jar-download.com/maven-repository-class-search.php?se ...

  3. Markdown - Typora 10分钟入门 - 精简归纳

    Markdown - Typora 10分钟入门 - 精简归纳 JERRY_Z. ~ 2020 / 8 / 22 转载请注明出处! 目录 Markdown - Typora 10分钟入门 - 精简归纳 ...

  4. 集成学习小结(RF、adaboost、xgboost)

    目录 回顾监督学习的一些要素 集成学习(学什么) bagging boosting 梯度提升(怎么学) GBDT Xgboost 几种模型比较 Xgboost 与 GBDT xgboost 和 LR ...

  5. e3mall商城总结13之订单确认(有BUG)

    说在前面的话 上一节说了购物车的生成,本节主要说了在购物车的列表上去结算,从而生成一个未支付的订单,生成的订单默认状态为1, 题目说的BUG是因为所有数据都是通过前端向后端生成的,包括订单的金额.因此 ...

  6. Android开发之数据存储——SharedPreferences基础知识详解,饿补学会基本知识,开发者必会它的用法。

    一.数据存储选项:Data Storage --Storage Options[重点] 1.Shared Preferences Store private primitive data in key ...

  7. 深入了解Kafka【四】消费者的Offset管理

    1.Offset Topic Consumer通过提交Offset来记录当前消费的最后位置,以便于消费者发生崩溃或者有新的消费者加入消费者组,而引发的分区再均衡操作,每个消费者可能会分到不同的分区.我 ...

  8. java初探(1)之登录初解

    初识登录 登录的应用场景 登录比较常见,大多数网站都有登录的操作.然后登录本身也从简单到复杂有着漫长的发展历史.本文记录博主对登录的应用场景的剖析,深究不在于学习如何实现,主要关注其编码思想,过程中用 ...

  9. 剑指 Offer 54. 二叉搜索树的第k大节点

    题目描述 给定一棵二叉搜索树,请找出其中第k大的节点. 示例1: 输入: root = [3,1,4,null,2], k = 1 3 / \ 1 4 \ 2 输出: 4 示例2: 输入: root ...

  10. Serverless 初体验:快速开发与部署一个Hello World(Java版)

    昨天被阿里云的这个酷炫大屏吸引了! 我等85后开发者居然这么少!挺好奇到底什么鬼东西都是90.95后在玩?就深入看了一下. 这是一个关于Serverless的体验活动,Serverless在国内一直都 ...