umi如何实现路由的动画跳转？

---

实现效果

在src下新建一个layouts的文件夹,在layouts文件夹下新建两个文件
index.less和index.tsx

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

在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 (
      <div>
         <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>
      </div>
   )
})

在page下面创建两个文件为Fen和Zhu,每一个文件夹下创建一个index.tsx文件夹

Fen文件夹下面的index.tsx写如下代码

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

export default function index() {
  return (
    <div style={{width:"800px",height:"800px",background:"red"}} onClick={()=>{
      history.push("\child")
    }} >
      这是分页面
    </div>
  )
}

Zhu文件夹下面的index.tsx写如下代码

import React from 'react'
import { history } from 'umi'
export default function index() {
  return (
    <div style={{width:"800px",height:"800px",background:"blue"}} onClick={()=>{
      history.push("/fen")
    }} >
      这事主页
    </div>
  )
}

在项目的.umirc.ts文件夹中配置上routes，代码如下

  routes: [
    {
      path: '/', component: '@/layouts/index.tsx',
      routes: [
        { path: '/child', component: '@/pages/Zhu'},
        { path: '/fen', component: '@/pages/Fen'},
      ]
    }
  ],