react路由动画？

1. import React, { useState, useEffect } from 'react'
2. import { TransitionGroup, CSSTransition } from 'react-transition-group'
3. import { history as Router, withRouter } from 'umi'
4. import { Switch } from 'react-router'
5. import './index.less'
6. 
7. const routerType = {
8. 'POP': 'back',
9. 'PUSH': 'in',
10. 'REPLACE': 'in'
11.     }
12. export default withRouter(({ location, children, history }) => {
13. return (
14. <TransitionGroup className='transition_wrapper' childFactory={(child) => (
15.          React.cloneElement(child, { classNames: routerType[history.action] })
16.    )}>
17. <CSSTransition key={location.pathname} appear timeout={2000}>
18.          {/* children.props.chiildren就是一个<Router></Router>的列表，location是对应的路由，switch会匹配对应当前hash展示路由 */}
19. <Switch location={location}>{(children as any)?.props?.children}</Switch>
20. </CSSTransition>
21. </TransitionGroup>
22. )
23. })

1. .in-enter-active{  // 入场的过渡状态类
2.     transition: all 3s;
3.     transform: translate(0, 0)!important;
4.   }
5. 
6.   .in-enter-done { // 入场的动画的结束状态类
7. // opacity: 0.5;
8.       transform: translate(0, 0) !important;
9.   }
10. 
11.   .in-enter {  // 入场的动画开始状态类
12.     z-index: 5 !important;
13.     transform: translate(100%, 0);
14.   }
15. 
16.   .in-exit-active {    // 离场动画
17.       opacity:0;
18.       transition: all 3s;
19.       transform: translate(-100%, 0)!important;
20.   }
21. 
22.   .in-exit {  // 离场动画开始
23. // transform: translate(0, 0)!important;
24.   }
25.   .in-exit-done { // 离场动画结束
26. 
27.   }
28. 
29. // 返回动画
30.   .back-enter-active{  // 入场的过渡状态类
31.       transition: all 3s;
32.       transform: translate(0, 0)!important;
33. 
34.     }
35.   .back-enter-done { // 入场的动画的结束状态类
36. // opacity: 0.5;
37.       transform: translate(0, 0) !important;
38.   }
39. 
40.   .back-enter {  // 入场的动画开始状态类
41.       z-index: 5 !important;
42.       transform: translate(-100%, 0);
43.   }
44. 
45.   .back-exit-active {    // 离场动画
46.       opacity:0;
47.       transition: all 3s;
48.       transform: translate(100%, 0)!important;
49.   }
50. 
51.   .back-exit {  // 离场动画开始
52. // transform: translate(0, 0)!important;
53.   }
54.   .back-exit-done { // 离场动画结束
55. 
56.   }

1. import React from 'react'
2. import { Button } from 'antd'
3. import { history } from 'umi'
4. import styles from './index.less'
5. import './index.less'
6. 
7. type Props = {}
8. 
9. export default function index({ }: Props) {
10. return (
11. <div className='divindex'>
12. <h1>index主页面展示</h1>
13. <Button color='primary' onClick={() => {
14.         history.push('./list')
15.       }}>点击跳转</Button>
16. 
17. </div>
18.   )
19. }