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'},
      ]
    }
  ],