React@16.x(42)路由v5.x(7)常见应用场景(4)- 路由切换动画

目录

  • 1,实现路由切换
    • 基础样式
  • 2,使用 CSSTransition 添加动画
    • 1,自定义动画组件 *TransitionRoute.jsx*
    • 2,*App.jsx*
    • 3,样式改动
  • 3,注意点

通过一个例子来说明如何实现。

1,实现路由切换

基础样式

App.jsx

import { BrowserRouter as Router, Route, NavLink } from "react-router-dom";
import { Home, News, Goods } from "./page";
import "./App.css";export default function App() {return (<div className="container"><Router><div className="nav-box"><NavLink to="/" exact>首页</NavLink><NavLink to="/news">新闻页</NavLink><NavLink to="/goods">商品页</NavLink></div><div className="page-box"><Route path="/" exact component={Home}></Route><Route path="/news" component={News}></Route><Route path="/goods" component={Goods}></Route></div></Router></div>);
}

App.css

.container {margin: 0 auto;width: 400px;
}.nav-box {background-color: lightblue;line-height: 3;text-align: center;
}.nav-box a {display: inline-block;margin: 10px;
}.nav-box a.active {color: salmon;
}.page-box {height: 200px;outline: 1px solid salmon;
}

page.jsx

import React from "react";
import "./page.css";export function Home() {return <div className="page home">Home</div>;
}export function News() {return <div className="page news">News</div>;
}export function Goods() {return <div className="page goods">Goods</div>;
}

page.css

.page {height: 100%;text-align: center;
}.home {background-color: lightblue;
}.news {background-color: lightgreen;
}.goods {background-color: lightyellow;
}

显示效果:

在这里插入图片描述

2,使用 CSSTransition 添加动画

CSSTransition 的使用参考 React@16.x(33)动画(上)

先看最终效果

在这里插入图片描述

  1. 可以看到路由页面(一开始)是重叠在一起的,所以需要使用绝对定位来实现。
  2. 动画过程中,对应的路由页面在动画开始前,应该是未加载的状态。同理,退出后应该是卸载状态。所以在 CSSTransition 组件上需要添加 mountOnEnterunmountOnExit

完整代码:

1,自定义动画组件 TransitionRoute.jsx

match 属性未匹配时为 null

import React from "react";
import { Route } from "react-router-dom";
import { CSSTransition } from "react-transition-group";
import "animate.css";export default function TransitionRoute(props) {const { component: Comp, ...rest } = props;return (<Route {...rest}>{({ match }) => {return (<CSSTransitionin={!!match}timeout={500}mountOnEnterunmountOnExitclassNames={{enterActive: "animate__fadeInRight",exitActive: "animate__fadeOutLeft",}}><Comp></Comp></CSSTransition>);}}</Route>);
}

2,App.jsx

只需要将 Route 替换为 TransitionRoute 即可。

3,样式改动

App.css,父级元素添加相对定位。

.page-box {position: relative;
}

page.jsx。因为想使用 animate.css,所以对进行动画的元素添加公共样式 animate__animated

import React from "react";
import "./page.css";export function Home() {return <div className="page animate__animated home">Home</div>;
}export function News() {return <div className="page animate__animated news">News</div>;
}export function Goods() {return <div className="page  animate__animated goods">Goods</div>;
}

page.css,添加绝对定位。

.page {position: absolute;left: 0;top: 0;height: 100%;width: 100%;
}

3,注意点

  • 当不使用 Swtich 组件时,每个Route 组件都会加载,只是不显示而已。所以可实现切换路由的动画。
  • 使用 Swtich 组件后,因为它只会加载匹配到的 Route 组件,其他Route 组件并没有加载,所以无法完成退出进入动画

在 React 的插件中可以检查下:

不使用 Switch 组件时,3个 Route 组件都会渲染,只是未匹配的不展示:

缺图

使用 Switch 后,只会渲染一个 Route 组件:

在这里插入图片描述


以上。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/36626.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[DDD] 领域驱动设计简介

领域驱动设计 Domain Driven Design 1 DDD简介 领域驱动设计&#xff08;Domain-Driven Design&#xff0c;简称DDD&#xff09;是一种软件开发方法论&#xff0c;它强调软件设计应紧密围绕业务领域模型进行。DDD的核心思想是将实现与业务逻辑分离&#xff0c;通过深入理解和…

亿发进销存管理系统+:多终端无缝协同,实现经营销售场景全覆盖

亿发软件凭借产品、市场、业务的深入理解&#xff0c;在进销存基础上进行了延伸&#xff0c;推出多终端、一体化的“进销存管理系统”多元产品矩阵。对企业经营中进货、出货、销售、付款等进行全程跟踪管理。有效辅助企业解决业务管理、销售管理、库存管理、财务管理等一系列问…

Java路径操纵漏洞示例与解决赏析之一

示例代码 public static List<File> findClassesInPackage(String codePath,String packageName, boolean recursive) {List<File> classFiles = new ArrayList<>();String packagePath = packageName.replace(., /);File directory = new File(codePath + &…

【大数据】—量化交易实战案例双均线策略(移动平均线)

声明&#xff1a;股市有风险&#xff0c;投资需谨慎&#xff01;本人没有系统学过金融知识&#xff0c;对股票有敬畏之心没有踏入其大门&#xff0c;今天用另外一种方法模拟炒股&#xff0c;后面的模拟的实战全部用同样的数据&#xff0c;最后比较哪种方法赚的钱多。 量化交易…

【项目实训】各种反爬策略及爬虫困难点总结

在这里&#xff0c;我总结了本次项目的数据收集过程中遇到的反爬虫策略以及一些爬虫过程中容易出现问题的地方。 user-agent 简单的设置user-agent头部为浏览器即可&#xff1a; 爬取标签中带href属性的网页 对于显示岗位列表的页面&#xff0c;通常检查其源代码就会发现&…

深入理解链表:基础概念、操作及应用

前言 链表&#xff08;Linked List&#xff09;是一种重要的数据结构&#xff0c;广泛应用于各种算法和系统设计中。本文将详细介绍链表的基本概念、类型、基本操作及其在实际编程中的应用&#xff0c;并使用C语言代码示例进行说明。 链表的基本概念 链表是一种线性数据结构…

【数据结构】(C语言):动态数组

动态数组&#xff1a; 内存区域连续&#xff0c;即每个元素的内存地址连续。可用索引查看元素&#xff0c;数组[索引号]。指定位置删除元素&#xff0c;该位置之后的元素全部往前移动一位。指定位置添加元素&#xff0c;从最后到该位置的元素全部往后移动一位。物理大小&#…

【保姆级讲解ECMAScript和JavaScript之间的区别】

&#x1f3a5;博主&#xff1a;程序员不想YY啊 &#x1f4ab;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f917;点赞&#x1f388;收藏⭐再看&#x1f4ab;养成习惯 ✨希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出…

mysql 升级到8.0

MySQL :: MySQL 8.0 Reference Manual :: 3.7 Upgrading MySQL Binary or Package-based Installations on Unix/Linux 2种升级方式&#xff1a; In-Place Upgrade &#xff1a; data目录替换 Logical Upgrade&#xff1a; 通过 mysqldump 导出为sql文本后&#xff0c;导入…

全面国产化信创适配改造方案说明

一、概叙 系统的全面国产化适配改造需要从多个方面进行考虑&#xff0c;改造前需要进行充分的论证&#xff0c;在满足具体业务场景的前提下&#xff0c;以确保系统的稳定性和安全性&#xff0c;同时还要考虑技术的发展&#xff0c;不断优化和更新。因此全面国产化适配改造也面临…

Redis集群安装(三主三从一哨兵)

Redis集群安装&#xff08;三主三从一哨兵&#xff09; 一&#xff0c;搭建环境 ​ 在三台服务器上分别搭建redis并测试是否能启动&#xff08;搭建方法&#xff09; 二&#xff0c;Redis cluster三主三从 配置环境变量 vim /etc/profile #添加如下内容 export REDIS_HOME…

AI 开发平台(Coze)搭建《AI女友(多功能版本)》

前言 本文讲解如何从零开始&#xff0c;使用扣子平台去搭建《AI女友&#xff08;多功能版本&#xff09;》 bot直达&#xff1a;AI女友&#xff08;多功能版&#xff09; - 扣子 AI Bot (coze.cn) 欢迎大家前去体验&#xff01;&#xff01;&#xff01; 正文 功能介绍 …

系统架构师考点--系统配置与性能评价

大家好。今天我们来总结一下系统配置与性能评价的考点内容&#xff0c;这一部分一般是出在上午场的选择题中&#xff0c;占1-2分左右。 一、性能指标 计算机 对计算机评价的主要性能指标有&#xff1a;时钟频率(主频)&#xff1b;运算速度&#xff1b;运算精度内存的存储容量…

ManageEngine连续荣登Gartner 2024年安全信息和事件管理魔力象限

我们很高兴地宣布&#xff0c;ManageEngine再次在Gartner的安全信息和事件管理&#xff08;SIEM&#xff09;魔力象限中榜上有名&#xff0c;这是我们连续第七年获得这一认可。 Gartner ManageEngine Log360是一款全面的SIEM解决方案&#xff0c;旨在帮助组织有效处理日志数据…

计算机共形几何简介

计算机共形几何&#xff08;Computational Conformal Geometry&#xff09;是一门研究计算机图形学和几何学结合的领域&#xff0c;主要研究曲面的表示、形变和分析等问题。共形几何是研究保持角度度量不变的几何变换&#xff0c;而计算机共形几何则是将共形几何的概念和方法应…

cuda 学习笔记4

一 基本函数 在GPU上开辟空间&#xff0c;无论定义的数据是float还是int ,还是****gpu_int,分配空间的函数都是下面固定的形式 (void**)& 1.函数定义&#xff0c;global void 是配套使用的&#xff0c;是在GPU上定义&#xff0c;也就是GPU上执行&#xff0c;CPU上调用的函数…

python pyautogui.position实时输出坐标

import pyautogui import timewhile True:# 获取鼠标当前坐标x, y pyautogui.position()# 打印坐标print(f"当前坐标&#xff1a;({x}, {y})")# 暂停1秒time.sleep(1) 输出实时鼠标位置坐标

Java高手的30k之路|面试宝典|精通MySQL(二)

分区表 分区类型 MySQL 支持以下几种表分区类型&#xff0c;这些分区类型有助于优化大型表的管理和查询性能&#xff1a; Range Partitioning&#xff08;范围分区&#xff09;&#xff1a; 范围分区是基于列的值范围来分配数据的。你可以定义一个或多个列的值区间&#xff0…

62.指针和二维数组(2)

一.指针和二维数组 1.如a是一个二维数组&#xff0c;则数组中的第i行可以看作是一个一维数组&#xff0c;这个一维数组的数组名是a[i]。 2.a[i]代表二维数组中第i行的首个元素的地址&#xff0c;即a[i][0]的地址。 二.进一步思考 二维数组可以看作是数组的数组&#xff0c;本…

springboot+vue+mybatis母婴二手销售系统+PPT+论文+讲解+售后

目前由于我国二手销售的规模较小,同发达国家相比,二手销售比重始终偏低,消费总额增长缓慢,进一步抑制了市场消费的提升,随着市场竞争的日益激烈,虽然许多商家主动选用二手销售模式,但却缺乏对其充分的重视与销售风险的良性控制,一些商家没有建立独立的信用实践管理部门,无法在交…