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