因为项目的需求, 需要在路由切换的时候, 加入一些比较 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>
- )// 欢迎加入前端全栈开发交流圈一起吹水聊天学习交流: 864305860
- }// 面向 1-3 年前端人员
- }// 帮助突破技术瓶颈, 提升思维能力
- 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 属性.
结语
感谢您的观看, 如有不足之处, 欢迎批评指正.
来源: http://www.qdfuns.com/article/51117/74c2c44854047d954071a136b8d42990.html