feat: 增加路由切换动画

package.json

@@ -61,6 +61,7 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-helmet-async": "^1.0.4",
+    "react-transition-group": "^4.4.1",
     "umi": "^3.2.14",
     "umi-request": "^1.0.8",
     "use-merge-value": "^1.0.1"
@@ -79,6 +80,7 @@
     "@umijs/fabric": "^2.3.0",
     "@umijs/plugin-blocks": "^2.0.5",
     "@umijs/plugin-esbuild": "^1.0.1",
+    "@umijs/plugin-sass": "^1.1.1",
     "@umijs/preset-ant-design-pro": "^1.2.0",
     "@umijs/preset-react": "^1.4.8",
     "@umijs/yorkie": "^2.0.3",

src/global.jsx

@@ -2,6 +2,7 @@ import { Button, message, notification } from 'antd'
 import React from 'react'
 import { useIntl } from 'umi'
 import defaultSettings from '../config/defaultSettings'
+import './basic/css/common.scss'
 
 const { pwa } = defaultSettings
 const isHttps = document.location.protocol === 'https:' // if pwa is true

src/global.less

@@ -1,5 +1,4 @@
 @import '~antd/es/style/themes/default.less';
-@import './assets/css/common.less';
 html,
 body,
 #root {

src/layouts/BasicLayout.jsx

@@ -6,13 +6,14 @@
 import ProLayout, { DefaultFooter } from '@ant-design/pro-layout'
 import React, { useEffect, useMemo, useRef } from 'react'
 import { Link, useIntl, connect, history } from 'umi'
-import { GithubOutlined } from '@ant-design/icons'
-import { Result, Button } from 'antd'
+import { Result, Button, message } from 'antd'
 import Authorized from '@/utils/Authorized'
 import RightContent from '@/components/GlobalHeader/RightContent'
 import { getMatchMenu } from '@umijs/route-utils'
 import logo from '../assets/logo.svg'
 import styles from './BasicLayout.less'
+import { CSSTransition, TransitionGroup } from 'react-transition-group'
+import './amimate.scss'
 
 const noMatch = (
   <Result
@@ -71,7 +72,8 @@ const BasicLayout = (props) => {
     children,
     settings,
     location = {
-      pathname: '/'
+      pathname: '/',
+      key: ''
     }
   } = props
   const menuDataRef = useRef([])
@@ -100,7 +102,7 @@ const BasicLayout = (props) => {
       getMatchMenu(location.pathname || '/', menuDataRef.current).pop() || {
         authority: undefined
       },
-    [ location.pathname ]
+    [location.pathname]
   )
   const { formatMessage } = useIntl()
   return (
@@ -133,8 +135,8 @@ const BasicLayout = (props) => {
         return first ? (
           <Link to={paths.join('/')}>{route.breadcrumbName}</Link>
         ) : (
-          <span>{route.breadcrumbName}</span>
-        )
+            <span>{route.breadcrumbName}</span>
+          )
       }}
       // footerRender={() => defaultFooterDom}
       menuDataRender={menuDataRender}
@@ -144,9 +146,17 @@ const BasicLayout = (props) => {
         return menuData || []
       }}
     >
-      <Authorized authority={authorized.authority} noMatch={noMatch}>
-        {children}
-      </Authorized>
+      <TransitionGroup className="wrap-container">
+        <CSSTransition
+          key={location.pathname}
+          timeout={250}
+          classNames="fade"
+        >
+          {children}
+        </CSSTransition>
+      </TransitionGroup>
+      {/* <Authorized authority={authorized.authority} noMatch={noMatch}> */}
+      {/* </Authorized> */}
     </ProLayout>
   )
 }

src/layouts/BasicLayout.less

@@ -4,6 +4,7 @@
     background: #554B7D;
   }
   :gloabl(.ant-menu-dark .ant-menu-inline.ant-menu-sub){
-      background:#4A4573 ;
+    background: #4A4573 ;
   }
-}
+}
+

src/layouts/amimate.scss

@@ -0,0 +1,27 @@
+.router-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+  background: white;
+}
+
+
+.fade-enter {
+  transform: translateX(-30px);
+  opacity: 0;
+}
+
+.fade-enter-active {
+  transform: translateX(0);
+  opacity: 1;
+  transition: all 0.28s;
+}
+
+.fade-exit {
+  display: none;
+}
+
+.fade-exit-active {
+  display: none;
+}