react-router 路由切换动画

时间: 2018-12-03阅读: 2200标签: react

路由切换动画

因为项目的需求,需要在路由切换的时候,加入一些比较 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.原理分析

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

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

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


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/1477

如何写出漂亮的 React 组件

在Walmart Labs的产品开发中,我们进行了大量的Code Review工作,这也保证了我有机会从很多优秀的工程师的代码中学习他们的代码风格与样式。在这篇博文里我会分享出我最欣赏的五种组件模式与代码片。不过我首先还是要谈谈为什么我们需要执着于提高代码的阅读体验

React中的优先级

UI产生交互的根本原因是各种事件,这也就意味着事件与更新有着直接关系。不同事件产生的更新,它们的优先级是有差异的,所以更新优先级的根源在于事件的优先级。一个更新的产生可直接导致React生成一个更新任务,最终这个任务被Scheduler调度

React 开发者常见的 3 个错误

关于前端开发,我最开心的事情就是总有新的东西可以学习。但我们可能一辈子都在掌握各种编程语言、库和框架,但仍然一无所知。因为我们都在学习,这也意味着我们都容易犯错误

create-react-app同时对多个框架(antd+antd-mobile)做按需加载的方法

在React项目开发中,经常需要引用一些实用的第三方框架。在使用一些比较庞大的第三方框架时,框架内的各种资源文件数量巨大,首先介绍下对单个框架做按需加载的方法

一文看懂React Hooks

React Hooks是从React 16.8版本推出的新特性,目的是解决React的状态共享以及组件生命周期管理混乱的问题。React Hooks的出现标志着,React不会再存在无状态组件的情况,React将只有类组件和函数组件的概念

深入 React 高阶组件

本文面向想要探索 HOC 模式的进阶用户,如果你是 React 的初学者则应该从官方文档开始。高阶组件(Higher Order Components)是一种很棒的模式,已被很多 React 库证实是非常有价值的。

React 服务端渲染完美的解决方案

使用 React 构建客户端应用程序,默认情况下,可以在浏览器中输出 React 组件,进行生成 DOM 和操作 DOM。React 也可以在服务端通过 Node.js 转换成 HTML,直接在浏览器端“呈现”处理好的 HTML 字符串,这个过程可以被认为 “同构”

react中PureComponent浅对比策略

PureComponent实现了Component中没有实现的shouComponentUpdata()方法,会对state和props进行一次浅对比,本文介绍一下浅对比策略,源码中,实现浅对比的函数是:shallowEqual()

如何使用React搭建前端?

首先说明node.js、npm、cnpm分别是做什么的?node.js简单的说 Node.js 就是运行在服务端的 JavaScript,安装了node.js默认安装了npm,可以使用npm -v查看是否安装。

React列表中实现文案多行收起展开的功能

在我们平时的业务开发中经常会用到文案超出只有收起,点击在展示全部文案;通常的使用时使用css来实现

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!