umi路由切换动画的实现

准备工作

node -v查看版本
检查是否有yarn 或者npm

实现步骤

1. 搭建umi脚手架

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

yarn create @umijs/umi-app

2. 下载完成需要yarn

3. 打开终端，按照react-transition-group插件

npm i react-transition-group
或者
yarn add react-transition-group

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

5. 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>
)
})

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

7. 在pages文件种创建自己需要的页面，页面需要体现路由跳转。

例子：
定义home和user页面。

import React from 'react'
import {history} from 'umi'

export default function home() {
  return (
    <div style={{background:"red",height:"500px"}}>
      <button onClick={() => { history.push('/user') }}>跳转到user页面</button>
    </div>
  )
}

import React from 'react'
import { history } from 'umi'

export default function user() {
  return (
    <div style={{ background: "pink", height: "500px" }}>
      <button onClick={() => { history.push('/scroll') }}>到scroll页面</button>
    </div>
  )
}

8. .umirc.ts中进行路由配置

routes: [
    { path: '/', component: '@/pages/login' }, //登录页面
    //配置了路由动画
    {
      path: "/",
      component: "@/layouts/index",
      wrappers: ['@/pages/wrappers'],
      routes: [
        // home页面
        {
          exact: true, path: '/home', component: '@/pages/animation/home'
        },
        // user页面
        {
          exact: true, path: '/user', component: '@/pages/animation/user'
        },
      ]
    }
  ],

9. 此时路由动画就配置完成了，可以在layouts中定义路由动画，也可以直接在pages中定义。