react路由动画切换（react 路由动画）

1.react过渡效果

1.1 在react项目中下载安装过渡动画模块

cnpm install react-transition-group --save

1.2 在需要执行过渡的组件中导入动画模块

import { CSSTransition } from 'react-transition-group'  // 导入css动画的组件模块

1.3 在需要过渡的标签外层添加CSSTranstion组件

<CSSTransition in={bool} timeout={2000} classNames="animate"><h1>这是动态显示的标签或组件</h1>
</CSSTransition>

使用动画的写法 CSSTransition 需要设置三个属性：

in: 控制子元素显示隐藏的条件，一般是bool值或表达式
timeout: 入场或出场动画的时间，单位默认毫秒
className：入场或出场class属性名前缀

1.4 在组建的css中通过class设置入场和出场动画

有两个过程，总共六个样式：

.animate-exit .animate-exit-active
.animate-exit-done

/* 入场动画过程 */
.animate-enter{opacity: 0;transform: translateY(300px);
}
.animate-enter-active{transition: 2s;opacity: 1;transform: translateY(0px);
}
.animate-enter-done{opacity: 1;transform: translateY(0px);
}
/* 出场动画过程 */
.animate-exit{opacity: 1;transform: translateY(0px);
}
.animate-exit-active{transition: 2s;opacity: 0;transform: translateY(300px);
}
.animate-exit-done{opacity: 0;transform: translateY(300px);
}

注意:

1, 入场和出场的class样式要按顺序写，动画开始和结束顺序不能颠倒

2, 需要在src/index.js中关闭严格模式<React.StrictMode>或删除

3, enter-active和exit-active中要写过渡结束状态才有效

4, 动画样式写完后，要导入需要执行过渡的组件中才能生效

import "./Animate.css"  // 导入动画样式

2.react路由切换动画

2.1 在react项目中下载安装过渡动画模块

cnpm install react-transition-group --save

2.2 在路由配置文件/src/router/index.js中导入动画组件

import { TransitionGroup, CSSTransition } from 'react-transition-group'

2.3 在路由组件模板中,用动画组件包裹路由组件

<TransitionGroup><CSSTransition timeout={2000} className="dg" unmountOnExit key={props.location.pathname}><Switch location={props.location}><Route exact path="/animate" component={Animate}/></Switch></CSSTransition>
</TransitionGroup>

注意：CSSTransition组件的key属性值要保证唯一性，所以用location.pathname

Switch组件要设置location属性为路由信息的props.location，保证路由跳转组件的key和CSSTransition的key一致

2.4 路由组件中没有路由信息location.pathname, 需要使用withRouter导入

import { withRouter } from 'react-router-dom'
export default withRouter(MyRouter)

2.5 在组件的css文件中写路由切换动画过程

/* 入场动画过程 */
.dg-enter{transform: translateX(200px)
}
.dg-enter-active{transition: 2s;transform: translateX(0px)
}
.dg-enter-done{transform: translateX(0px)
}
/* 出场动画过程 */
.dg-exit{transform: translateX(0px)
}
.dg-exit-active{transition: 2s;transform: translateX(200px)
}
.dg-exit-done{transform: translateX(200px)
}.home, .user, .login, .animate{position: absolute;left: calc(50% - 200px)
}

react路由动画切换（react 路由动画）相关推荐

react react-router V6 路由切换实现过渡动画
安装 npm install @types/react-transition-group react-transition-group --save import { CSSTransition,Tr ...
给React-Router添加路由页面切换时的过渡动画
PS: 本篇文章使用的React-Router版本为react-router-dom: ^5.0.0 (兼容4.x) 使用过Vue2的同学们应该都知道<transition>这个内置组件, ...
Vue router-view 路由无缝切换动画
Vue router-view 路由无缝切换动画,左滑淡出,右滑淡入. HTML: <div class="wrap"><transition mode=&quo ...
React App项目页面进出场动画
github: gitee.com/yangon/reac- demo: yangon.gitee.io/react-app/ 用到的组件react-animated-router react-ani ...
React+TS学习和使用（三）：React Redux和项目的路由配置
开启学习react+ts,本篇主要是学习使用React Redux和项目的路由配置一.React Redux 需求:使用TS+React Redux实现一个累加. A. 安装 $ yarn add ...
Vue3中实现路由跳转的过渡动画(一)
由于VueRouter官方文档写的太过抽象,真的特别不好理解,所以我来总结一下如何去更简单地理解路由跳转时的动画. 首先看一下官方对于这个概念的解释. 在刚开始学习的时候,看到黄色框框里内容直接傻眼, ...
React Native填坑之旅--动画篇
React Native填坑之旅--Button篇 React Native填坑之旅--动画 React Native填坑之旅--HTTP请求篇动画是提高用户体验不可缺少的一个元素.恰如其分的动画可 ...
React单页如何规划路由、设计Store、划分模块、按需加载
本项目地址:react-coat-helloworld react-coat 同时支持浏览器渲染(SPA)和服务器渲染(SSR),本 Demo 仅演示浏览器渲染,请先了解一下:react-coat 第 ...
react登录页面_React 实现路由拦截
接到个新项目,使用的是React,由于React没有属于自己的路由拦截方法,只有自己封装Route成高阶组件来实现,现记录下实现的方式: 首先创建一个router文件,引入项目需要展示的组件 . ex ...

react路由动画切换（react 路由动画）

react路由动画切换（react 路由动画）相关推荐

最新文章

热门文章