使用react-router怎么实现一个路由切换动画 - 行业资讯 - 肥雀云

　　介绍

本篇文章给大家分享的是有关使用react-router怎么实现一个路由切换动画,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

<强> 1。插件依赖

使用的插件是<代码> react-transition-group>

<代码> CSSTransition 这个组件有两个比较主要的属性:<代码> 的关键和。

<代码>:布尔属性其实可以理解为是否显示当前内容节点。真正<代码> 则显示,<代码>假>

<代码>关键:字符串这个属性是配合<代码> TransitionGroup> 键>

<强> 2。开关组件

这个组件有一个很重要的属性:<代码> 位置。同时这个属性也是路由切换动画的关键所在。<代码>开关> 作为匹配依据来进行路由匹配。但是如果<代码> 切换组件定义了<代码> 位置属性,其中的子组件就会以定义的<代码> 位置作为匹配依据。

<强> 3。代码部分

import 反应,,{,Component },得到& # 39;反应# 39; 　　import {TransitionGroup的不同之处是,CSSTransition },得到& # 39;react-transition-group& # 39; 　　import {,开关,路线,withRouter },得到& # 39;react-router-dom& # 39; 　　　　@withRouter 　　class Routes extends Component { 　　渲染才能(),{ 　　,,,const 位置=this.props.location 　　,,,return ( 　　,,,,,& lt; TransitionGroup> 　　,,,,,,,& lt; CSSTransition 关键={location.key},超时={1000},一会=癴ade"比; 　　,,,,,,,,,& lt; Switch 位置={}位置比; 　　,,,,,,,,,,,& lt; Route 路径=?route-1",组件={Route1},/比; 　　,,,,,,,,,,,& lt; Route 路径=?route-2",组件={Route2},/比; 　　,,,,,,,,,& lt;/Switch> 　　,,,,,,,& lt;/CSSTransition> 　　,,,,,& lt;/TransitionGroup> 　　,,,) 　　,,} 　　} 　　　　export default 路线

<强> 4。原理分析

先确定需求:当切换路由的时候,旧的路由内容在一定时间内过渡消失,新的路由内容过渡显示。

在这个需要里面有两个重要的部分:

<李>

过渡期间,会同时存在两个节点:新节点和旧节点

<李>

旧节点应该显示旧的路由内容,新的节点应该显示新的路由内容

<强> 4.1同时存在两节点

刚刚提到的<代码> CSSTransition 的<代码> 属关键性可以决定该节点是否需要显示。

而路由器<代码> 中的<代码> 位置属性会在路由发生变化的时候,进行更新,而<代码> 里位置面的<代码>键> CSSTransition 的<代码>键。

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

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

<强> 4.2新旧节点对应新旧路由内容

如果只是配置关键<代码> 属性,会发现旧的节点会去匹配新的路由内容。这是因为<代码>路径> 位置进行匹配。为了让旧节点中的<代码>路径> 位置进行匹配,就需要设置开关<代码> 的<代码> 位置属性。

以上就是使用react-router怎么实现一个路由切换动画,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注行业资讯频道。