React App项目页面进出场动画
- github: gitee.com/yangon/reac…
- demo: yangon.gitee.io/react-app/
用到的组件react-animated-router
react-animated-router
www.npmjs.com/package/rea…
react 路由切换动画,支持嵌套路由 (nested routers)和动态路由(dynamic routers)。
安装
npm install react-animated-router --save复制代码
引入
在路由配置文件中引入,src/route/App.js
文件中引入
import AnimatedRouter from 'react-animated-router'; //导入我们的的AnimatedRouter组件
import 'react-animated-router/animate.css'; //导入默认的切换动画样式,如果需要其它切换样式,可以导入自己的动画样式定义文件复制代码
使用
<Router basename = "react-app"><Switch><AnimatedRouter timeout={300}><Route exact path='/' component={Index} /><Route exact path='/page1' component={Page1} /><Route exact path='/page2' component={Page2} /></AnimatedRouter></Switch></Router>
复制代码
AnimatedRouter
是一个标准的 React 组件,类似react-router
中的Switch
,将它放入你的项目中,然后在需要支持动画的地方,使用AnimatedRouter
替换你的Switch
组件即可。
属性 | 类型 | 默认值 | 描述 |
---|---|---|---|
prefix | 字符串,可选 |
animated-router
|
应用到 CSSTransition 组件的 classNames 前缀。如果要在同一个项目中使用不同的动画,可以通过设置前缀来定义不同的动画。关于如何自定义动画,请查看下方说明 |
timeout | 数字,可选 | 无 | 动画持续时间(毫秒),可以不传,默认为监听 transitionend 时间来判断动画结束。如果有动画异常,可以尝试设置该值,需要注意的是,该值应该与动画样式中定义的过渡时间一致 |
className | 字符串,可选 | 无 | 如果传入 className 则会添加到动画节点所在容器节点上 |
transitionKey | 字符串,可选 | 无 |
即每个页面节点需要的 key 值,如果不传则会使用当前页面地址的 pathname。 该属性可以用于处理路由页面中还有子路由时的情况,用来避免子路由切换会导致父级页面也一块被重载。 |
component | 布尔,可选 | 'div' |
AnimatedRouter 默认会 render 一个 div 节点,你可以通过该字段修改 render 的节点类型,例如,component="section" 将会 render <section> 节点。在 react v16+中,可以传入 null 来避免渲染该节点。
|
appear | 布尔,可选 | false | 文档:appear:是否启用组件首次挂载动画(启用的话将会触发 enter 进场动画) |
enter | 布尔,可选 | true | 文档:enter:是否启用进场动画 |
exit | 布尔,可选 | true | 文档:exit:是否启用离场动画 |
自定义动画
如果不希望使用左右滑入动画,则可以自定义自己的路由动画。可以将默认的 animate.scss(css) 复制进自己的项目,然后修改不同阶段的样式值即可。
页面分为前进(forward)和后退(backward),两者分别会应用不同的 classNames 到react-transition-group
的CSSTransition组件。关于 classNames 的更多用法,请参考官方文档。
默认的 classNames 如下,如果你设置了 prefix,则名称会变为 {prefix}-forward
/ {prefix}-backward
。
classNames | 解释 |
---|---|
animated-router-forward | 页面前进时动画效果 |
animated-router-backward | 页面后退时动画效果 |
同时,如果没有设置componnt={null}
的话,AnimateRouter 将会渲染一个路由页面容器节点,该节点会有一些 className,可以用来辅助做动画定义。
容器节点 className | 解释 |
---|---|
animated-router-container | 总是存在 |
animated-router-in-transition | 路由动画进行中时存在,可以用来设置动画切换中的一些节点样式设置 |
React App项目页面进出场动画相关推荐
- Vite 3.0 vs. Create React App:比较和迁移指南
Create React App (CRA) 在 React 社区及其整个生态系统的发展中发挥了关键作用. 在突发奇想构建本地 React 开发环境时,它是不同技能的开发人员的首选工具. CRA 拥有 ...
- 在 .NET Core 5 中集成 Create React app
翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] 本文演示了如何将 Crea ...
- 如何使用Create React App DevOps自动化工作中所有无聊的部分
by James Y Rauhut 詹姆士·鲁豪(James Y Rauhut) 如何使用Create React App DevOps自动化工作中所有无聊的部分 (How I automate al ...
- React App中使用Avataaars自由设计头像
本篇文章将使用 create-react-app 快速构建 React 开发环境,创建基于 Webpack + ES6的项目,导入Avataaars包去设计属于自己的可爱头像. GitHub源码地址: ...
- 视频教程-React全栈:前后端分离的招聘Web App项目(含资料)-ReactJS
React全栈:前后端分离的招聘Web App项目(含资料) 张长志技术全才.擅长领域:区块链.大数据.Java等.10余年软件研发及企业培训经验,曾为多家大型企业提供企业内训如中石化,中国联通,中国 ...
- 【SwiftUI项目】0011、SwiftUI项目-费用跟踪-记账App项目-第3/3部分 -日期指定选定-新增费用页面
SwiftUI小功能模块系列 0001.SwiftUI自定义Tabbar动画效果 0002.SwiftUI自定义3D动画导航抽屉效果 0003.SwiftUI搭建瀑布流-交错网格-效果 0004.Sw ...
- 最新 vue2.x 仿饿了么app商家页面 项目总结
最新vue2.x仿饿了么app 商家页面 项目总结 标签(空格分隔): vuejs 前言 仿饿了么app是基于vue2.x最新实战项目,用到的技术栈 vue2 + vue-router2 + vue- ...
- vue移动端过渡动画_Vue仿微信app页面跳转动画效果
10:14:11独立开发者在开发移动端产品时,为了更高效,通常会使用Web技术来开发移动端项目,可以同时适配Android.iOS.H5,稍加改动还可适配微信小程序. 在使用Vue.js开发移动端页面 ...
- Create React App来搭建react项目
版本过旧请参考此网址更新:Getting Started | Create React App npx create-react-app my-app 备注:react使用比较自由,不限制多或者少,愿 ...
最新文章
- QLibrary 动态加载外部库文件
- python 2.6下 No module named sysconfig
- |Tyvj|NOIP2004|堆|贪心|P1066 合并果子
- UILocalNotification详解
- 进程间通信-字符串的传递
- Tomcat服务与搭建(一)
- leftjoin多了性能下降_SBR胶乳改性剂用量对乳化沥青及微表处性能影响
- 计算机二级vb上机操作题库,全国计算机等级考试 二级VB 上机题库精简版 考试必备,...
- vb.net 教程 6-1 进程 Process类初探
- 计算机考试长文档编辑,职称计算机考试:Powerpoint2003长文档1
- 三丰三坐标编程基本步骤_贴片机编程教程,编程步骤,编程怎么编
- 服务器虚拟化集群部署
- 资深架构师推荐 21 本技术好书
- 为了让你在“口袋奇兵”聊遍全球,手撕ArrayList底层,透彻分析源码
- ant design pro v5 之 ProForm自定义表单项
- Silvaco TCAD仿真4——设计一个元件nmos(Atlas)
- SpringCloud微服务之间使用Feign调用不通情况举例
- docker image 的sha256 digest摘要
- C4D学习笔记2-动画-时间线及时间函数
- 网络WIFI 无法连接 无法上网网络故障
热门文章
- linux grep 例子,Linux中Grep常用的15个例子
- c语言贪吃蛇编写分析,刚学C语言,想写一个贪吃蛇的代码
- 原生js设置div隐藏或者显示_JS实现“隐藏与显示”功能(多种方法)
- sql 找到上一次_记一次对XXCMS的代码审计
- unity windows打包ios_ios打包unity应用以及配置签名!
- Miniconda3+Tensorflow2.3(GPU版)+Win10_x64+GTX1060深度学习环境搭建
- 工作流程怎么安排?用Edraw Max轻松创建工作流程图!
- SpringBoot整合Freemarker+Mybatis
- WKWebView高度自适应三种方式
- 1.5 Kali Linux策略