umi 路由切换动画的实现

1.准备工作

node -v查看版本（必须在10以上）
检查是否有yarn（没有的话，用npm i yarn -g进行全局安装）

2.实现

2.1 搭建umi脚手架

创建一个文件夹，cmd进入黑窗口，输入：

yarn create @umijs/umi-app	

2.2 补全缺失的信息

在cmd黑窗口输入yarn进行补全

2.3 利用编译工具打开文件夹

2.4 点击ctrl+`打开终端，安装react-transition-group插件

npm i react-transition-group

2.5 在src目录下创建layouts文件夹，并在文件夹下创建两个文件

2.6 在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 { // 离场动画结束
 
}

2.7 在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>
)
})

2.8 在pages文件中创建自己需要的页面,页面中需要体现路由跳转

页面1：home.jsx

import React from 'react'
import { history } from 'umi'
import './index.less'
 
export default function Home() {
  return (
    <div className='home'>
        home页面
        <button onClick={()=>{history.push('/')}}>跳转到index页面</button>
    </div>
  )
}

页面2：index.tsx

import './index.less'
import { history } from 'umi';
 
export default function Index() {
  
  return (
    <div className='index'>
      index
      <button onClick={()=>{history.push('/home')}}>跳转到home页面</button>
    </div>
  );
}

样式：index.less

.index,#root,.home{
    height: 100%;
}
.index{
    background-color: pink;
}
.home{
    background-color: antiquewhite;
}

2.9 将umirc.ts文件中的配置路由注释掉

2.10 运行项目

yarn start/npm start

3.完成效果

切换