umi 路由切换动画的实现步骤
1、环境准备
首先得有 node,并确保 node 版本是 10.13 或以上。(mac 下推荐使用 nvm 来管理 node 版本)
$ node -v
v10.13.0
推荐使用 yarn 管理 npm 依赖,并使用国内源(阿里用户使用内网源)。
# 国内源
$ npm i yarn tyarn -g
# 后面文档里的 yarn 换成 tyarn
$ tyarn -v
# 阿里内网源
$ tnpm i yarn @ali/yarn -g
# 后面文档里的 yarn 换成 ayarn
$ ayarn -v
2、搭建umi脚手架
先找个地方建个空目录
$ mkdir myapp && cd myapp
通过官方工具创建项目
$ yarn create @umijs/umi-app
# 或 npx @umijs/create-umi-app
3、补全缺失的信息
npm i
4、安装react-transition-group插件
npm i react-transition-group
5、在src目录下创建layouts文件夹,并在文件夹下创建两个文件
在index.tsx文件中复制如下代码
import React, { useState, useEffect } from 'react'
import { TransitionGroup, CSSTransition } from 'react-transition-group'
import { history as Router, withRouter } from 'umi'
import { Switch } from 'react-router'
import './index.less'
const routerType = {
'POP': 'back',
'PUSH': 'in',
'REPLACE': 'in'
}
export default withRouter(({ location, children, history }) => {
return (
<TransitionGroup style={{height:'100%'}} className='transition_wrapper' childFactory={(child) => (
React.cloneElement(child, { classNames: routerType[history.action] })
)}>
<CSSTransition key={location.pathname} appear timeout={3000}>
<Switch location={location}>{(children as any)?.props?.children}</Switch>
</CSSTransition>
</TransitionGroup>
)
})
在index.less文件中复制如下代码
.in-enter-active{ // 入场的过渡状态类
transition: all 3s;
transform: translate(0, 0)!important;
}
.in-enter-done { // 入场的动画的结束状态类
// opacity: 0.5;
transform: translate(0, 0) !important;
}
.in-enter { // 入场的动画开始状态类
z-index: 5 !important;
transform: translate(100%, 0);
}
.in-exit-active { // 离场动画
opacity:0;
transition: all 3s;
transform: translate(-100%, 0)!important;
}
.in-exit { // 离场动画开始
// transform: translate(0, 0)!important;
}
.in-exit-done { // 离场动画结束
}
// 返回动画
.back-enter-active{ // 入场的过渡状态类
transition: all 3s;
transform: translate(0, 0)!important;
}
.back-enter-done { // 入场的动画的结束状态类
// opacity: 0.5;
transform: translate(0, 0) !important;
}
.back-enter { // 入场的动画开始状态类
z-index: 5 !important;
transform: translate(-100%, 0);
}
.back-exit-active { // 离场动画
opacity:0;
transition: all 3s;
transform: translate(100%, 0)!important;
}
.back-exit { // 离场动画开始
// transform: translate(0, 0)!important;
}
.back-exit-done { // 离场动画结束
}
旋转动画
/* 入场动画过程 */
.in-enter-active {
transition: all 3s;
transform: translate(0, 0) !important;
}
.in-enter-done {
transform: translate(0, 0) !important;
}
.in-enter {
z-index: 5 !important;
transform: rotate(180deg)
}
.in-exit-active {
opacity: 0;
transform: rotate(180deg)
}
/* 出场动画过程 */
.back-enter-active {
transition: all 3s;
transform: translate(0, 0) !important;
}
.back-enter {
z-index: 5 !important;
transform: translate(-100%, 0);
}