umi 路由切换动画

1.我们这里有index和home两个页面

 

 

import React, { Component } from 'react'
import { history } from 'umi';
import { Button } from 'antd-mobile/es'

export default function my(){
    return (
      <div style={{backgroundColor:'#000',width:'100%',height:'100vh'}}>
         <Button color='primary' fill='solid'  onClick={() => history.push('home')}>跳转home页面</Button>
      </div>
    )
}

import React, { Component } from 'react'
import { history } from 'umi';
import { Button } from 'antd-mobile/es'

export default function my(){
    return (
        <div style={{backgroundColor:'#f7acbc',width:'100%',height:'100vh'}}>
         <Button color='primary' fill='solid'  onClick={() => history.push('/')}>回到index页面</Button>
      </div>
    )
}

 

2.路由默认到index页面

.umirc.ts

import { defineConfig } from 'umi';

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  routes: [
    {
      exact:false,
      path: '/',
       component: '@/layouts',
       routes:[
        { exact:true,path:'/',component:'@/pages/List/index' },
        { exact:true,path:'/home',component:'@/pages/Home/index' },
       ]
      },
  ],
  fastRefresh: {},
});

layout 文件夹内容

 

3.下载第三方库react-transition-group 使用TransitionGroup, CSSTransition进行路由切换

index.tsx

import React, { useState, useEffect } from 'react';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import './index.less';
import { Switch } from 'react-router';
import { history as Router, withRouter } from 'umi';
const routerType = {
    'POP': 'back',
    'PUSH': 'in',
    'REPLACE': 'in'
}
//
export default withRouter(({ location, children, history }) => {
    console.log(children);
    return (
        <TransitionGroup className='transition_wrapper' childFactory={(child) => (
            React.cloneElement(child, { classNames: routerType[history.action] })
        )}>
            <CSSTransition key={location.pathname} appear timeout={3000}>
                {/* children.props.chiildren就是一个<Router></Router>的列表，location是对应的路由，switch会匹配对应当前hash展示路由 */}
                <Switch location={location}>{(children as any)?.props?.children}</Switch>
            </CSSTransition>
        </TransitionGroup>
    )
})

注意router路由切换类型 动画会根据路由切换时的动作类型，呈现出不同的效果 

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

}