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);
}

7、.umirc.ts文件中的配置