feat: 使用react-transition-group添加路由转场动画

Author: NLRX-WJC

package.json

@@ -35,6 +35,7 @@
     "react-redux": "^7.2.0",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.4.1",
+    "react-transition-group": "^4.4.1",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
     "screenfull": "^5.0.2",

src/styles/index.less

@@ -1,3 +1,5 @@
+@import './transition.less';
+
 body {
   height: 100%;
   -moz-osx-font-smoothing: grayscale;

src/styles/transition.less

@@ -0,0 +1,17 @@
+//  路由转场动画
+.fade-enter {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.fade-enter-active,
+.fade-exit-active {
+  opacity: 1;
+  transition: all 500ms ease-out;
+  transform: translateX(0);
+}
+
+.fade-exit {
+  opacity: 0;
+  transform: translateX(30px);
+}

src/views/layout/Content/index.jsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Redirect, withRouter, Route, Switch } from "react-router-dom";
 import DocumentTitle from "react-document-title";
 import { connect } from "react-redux";
+import { CSSTransition, TransitionGroup } from "react-transition-group";
 import { Layout } from "antd";
 import { getMenuItemInMenuListByProperty } from "@/utils";
 import routeList from "@/config/routeMap";
@@ -27,21 +28,25 @@ const LayoutContent = (props) => {
   return (
     <DocumentTitle title={getPageTitle(menuList, pathname)}>
       <Content style={{ height: "calc(100% - 100px)" }}>
-        <Switch>
-          <Redirect exact from="/" to="/dashboard" />
-          {routeList.map((route) => {
-            return (
-              handleFilter(route) && (
-                <Route
-                  component={route.component}
-                  key={route.path}
-                  path={route.path}
-                />
-              )
-            );
-          })}
-          <Redirect to="/error/404" />
-        </Switch>
+        <TransitionGroup>
+          <CSSTransition key={location.pathname} timeout={500} classNames="fade" exit={false}>
+            <Switch location={location}>
+              <Redirect exact from="/" to="/dashboard" />
+              {routeList.map((route) => {
+                return (
+                  handleFilter(route) && (
+                    <Route
+                      component={route.component}
+                      key={route.path}
+                      path={route.path}
+                    />
+                  )
+                );
+              })}
+              <Redirect to="/error/404" />
+            </Switch>
+          </CSSTransition>
+        </TransitionGroup>
       </Content>
     </DocumentTitle>
   );