提示：文章寫完后，目錄可以自動生成，如何生成可參考右邊的幫助文檔

1、查看node版本

環(huán)境準(zhǔn)備

	wim + R 打開 cmd
 	輸入命令： node -v查看版本（必須是10以上版本）
 	查看是否有 yarn （如果沒有，使用npm install yarn -g進行安裝。）

2、搭建腳手架

①.找個地方建一個空目錄

wim + R 打開 cmd

//創(chuàng)建一個文件夾

$ mkdir umiDemo 

//cd進入創(chuàng)建好的空文件下

$ cd umi umiDemo

2.搭建umi腳手架

接著上一步進行以下操作

$ yarn create @umijs/umi-app

//或者

$ npx @umijs/create-umi-app

//然后 yarn 安裝依賴

利用編譯工具打開創(chuàng)建好的umi腳手架。

3.正式配置路由動畫

1.1 在src文件目錄下創(chuàng)建一個 layouts文件夾，在文件夾里創(chuàng)建兩個文件。

1.2 在index.tsx文件中復(fù)制如下代碼：

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

1.3 在index.less文件中復(fù)制如下代碼：

.in-enter-active{  // 入場的過渡狀態(tài)類
  transition: all 3s;
  transform: translate(0, 0)!important;
}
 
.in-enter-done { // 入場的動畫的結(jié)束狀態(tài)類
    // opacity: 0.5;
    transform: translate(0, 0) !important;
}
 
.in-enter {  // 入場的動畫開始狀態(tài)類
  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 { // 離場動畫結(jié)束
 
}
 
// 返回動畫
.back-enter-active{  // 入場的過渡狀態(tài)類
    transition: all 3s;
    transform: translate(0, 0)!important;
  
  }
.back-enter-done { // 入場的動畫的結(jié)束狀態(tài)類
    // opacity: 0.5;
    transform: translate(0, 0) !important;
}
 
.back-enter {  // 入場的動畫開始狀態(tài)類
    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 { // 離場動畫結(jié)束
 
}

1.4 .umirc.ts文件中的配置

要讓layouts文件作為一級路由
文章來源地址http://www.zghlxwxcb.cn/news/detail-704290.html

到了這里，關(guān)于umi 中的路由切換動畫如何實現(xiàn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！