diff --git a/node_modules/.package-lock.json b/node_modules/.package-lock.json
index e74cb71e..151bb5f1 100644
--- a/node_modules/.package-lock.json
+++ b/node_modules/.package-lock.json
@@ -3165,7 +3165,6 @@
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
       "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
-      "dev": true,
       "dependencies": {
         "core-js": "^2.4.0",
         "regenerator-runtime": "^0.11.0"
@@ -3176,14 +3175,12 @@
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
       "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
       "deprecated": "core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.",
-      "dev": true,
       "hasInstallScript": true
     },
     "node_modules/babel-runtime/node_modules/regenerator-runtime": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
-      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==",
-      "dev": true
+      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
     },
     "node_modules/balanced-match": {
       "version": "1.0.2",
@@ -4398,6 +4395,15 @@
       "resolved": "https://registry.npmjs.org/dom-align/-/dom-align-1.12.2.tgz",
       "integrity": "sha512-pHuazgqrsTFrGU2WLDdXxCFabkdQDx72ddkraZNih1KsMcN5qsRSTR9O4VJRlwTPCPb5COYg3LOfiMHHcPInHg=="
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/dom-walk": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
@@ -10612,8 +10618,7 @@
     "node_modules/performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
-      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=",
-      "dev": true
+      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
     },
     "node_modules/picocolors": {
       "version": "0.2.1",
@@ -11475,7 +11480,6 @@
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
       "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
-      "dev": true,
       "dependencies": {
         "performance-now": "^2.1.0"
       }
@@ -11855,6 +11859,19 @@
         "react-dom": ">=16.9.0"
       }
     },
+    "node_modules/rc-scroll-anim": {
+      "version": "2.7.6",
+      "resolved": "https://registry.npmjs.org/rc-scroll-anim/-/rc-scroll-anim-2.7.6.tgz",
+      "integrity": "sha512-VwXJYXjZy9TtH1wcQIG7/yjt/Ay3VEjQl/TITaWzK9O7ujjOXRVOYY/tqKshmBMgaJ2oGeFQNmCN8zTwXguq0g==",
+      "dependencies": {
+        "babel-runtime": "6.x",
+        "prop-types": "^15.6.0",
+        "raf": "3.x",
+        "rc-tween-one": "^2.4.0",
+        "react-lifecycles-compat": "^3.0.4",
+        "tween-functions": "1.x"
+      }
+    },
     "node_modules/rc-select": {
       "version": "14.0.0-alpha.27",
       "resolved": "https://registry.npmjs.org/rc-select/-/rc-select-14.0.0-alpha.27.tgz",
@@ -12060,6 +12077,19 @@
         "react-dom": ">=16.9.0"
       }
     },
+    "node_modules/rc-tween-one": {
+      "version": "2.7.3",
+      "resolved": "https://registry.npmjs.org/rc-tween-one/-/rc-tween-one-2.7.3.tgz",
+      "integrity": "sha512-n4OPRLO6VMZHj61unq5KKxHMMfBz52bxob94fN3U5M9GqFg3H+T3TXnpHPnAK+cq/xBGo70ik2vB4Fpjo/txcA==",
+      "dependencies": {
+        "babel-runtime": "6.x",
+        "prop-types": "^15.6.1",
+        "raf": "~3.4.0",
+        "react-lifecycles-compat": "^3.0.4",
+        "style-utils": "~0.2.0",
+        "tween-functions": "~1.2.0"
+      }
+    },
     "node_modules/rc-upload": {
       "version": "4.3.3",
       "resolved": "https://registry.npmjs.org/rc-upload/-/rc-upload-4.3.3.tgz",
@@ -12165,8 +12195,7 @@
     "node_modules/react-lifecycles-compat": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
-      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==",
-      "dev": true
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
     "node_modules/react-native-swipeout": {
       "version": "2.3.6",
@@ -12304,6 +12333,21 @@
         "react-dom": "^16.3.0 || ^17.0.0"
       }
     },
+    "node_modules/react-transition-group": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
+      "integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/react-tween-state": {
       "version": "0.1.5",
       "resolved": "https://registry.npmjs.org/react-tween-state/-/react-tween-state-0.1.5.tgz",
@@ -14093,6 +14137,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/style-utils": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/style-utils/-/style-utils-0.2.1.tgz",
+      "integrity": "sha512-eKRIfWnUSdBqe2ko+qisUwBSlfWpHru89geRqzmScpDhkPW1ksmE04d//nDcXeF+TVK5cnBG90mMmHgxyxXleQ=="
+    },
     "node_modules/supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -14383,8 +14432,7 @@
     "node_modules/tween-functions": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/tween-functions/-/tween-functions-1.2.0.tgz",
-      "integrity": "sha1-GuOlDnxguz3vd06scHrLynO7w/8=",
-      "dev": true
+      "integrity": "sha1-GuOlDnxguz3vd06scHrLynO7w/8="
     },
     "node_modules/tweetnacl": {
       "version": "0.14.5",
diff --git a/package-lock.json b/package-lock.json
index 08bab132..bcfb1d84 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,8 +8,10 @@
       "dependencies": {
         "@ant-design/icons": "^4.7.0",
         "@ant-design/pro-layout": "^6.5.0",
+        "rc-scroll-anim": "^2.7.6",
         "react": "17.x",
         "react-dom": "17.x",
+        "react-transition-group": "^4.4.2",
         "umi": "^3.5.20"
       },
       "devDependencies": {
@@ -17,6 +19,7 @@
         "@types/react-dom": "^17.0.0",
         "@umijs/preset-react": "1.x",
         "@umijs/test": "^3.5.20",
+        "classnames": "^2.3.1",
         "lint-staged": "^10.0.7",
         "prettier": "^2.2.0",
         "typescript": "^4.1.2",
@@ -3185,7 +3188,6 @@
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
       "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
-      "dev": true,
       "dependencies": {
         "core-js": "^2.4.0",
         "regenerator-runtime": "^0.11.0"
@@ -3196,14 +3198,12 @@
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
       "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
       "deprecated": "core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.",
-      "dev": true,
       "hasInstallScript": true
     },
     "node_modules/babel-runtime/node_modules/regenerator-runtime": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
-      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==",
-      "dev": true
+      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
     },
     "node_modules/balanced-match": {
       "version": "1.0.2",
@@ -4428,6 +4428,15 @@
       "resolved": "https://registry.npmjs.org/dom-align/-/dom-align-1.12.2.tgz",
       "integrity": "sha512-pHuazgqrsTFrGU2WLDdXxCFabkdQDx72ddkraZNih1KsMcN5qsRSTR9O4VJRlwTPCPb5COYg3LOfiMHHcPInHg=="
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/dom-walk": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
@@ -10688,8 +10697,7 @@
     "node_modules/performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
-      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=",
-      "dev": true
+      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
     },
     "node_modules/picocolors": {
       "version": "0.2.1",
@@ -11551,7 +11559,6 @@
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
       "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
-      "dev": true,
       "dependencies": {
         "performance-now": "^2.1.0"
       }
@@ -11931,6 +11938,19 @@
         "react-dom": ">=16.9.0"
       }
     },
+    "node_modules/rc-scroll-anim": {
+      "version": "2.7.6",
+      "resolved": "https://registry.npmjs.org/rc-scroll-anim/-/rc-scroll-anim-2.7.6.tgz",
+      "integrity": "sha512-VwXJYXjZy9TtH1wcQIG7/yjt/Ay3VEjQl/TITaWzK9O7ujjOXRVOYY/tqKshmBMgaJ2oGeFQNmCN8zTwXguq0g==",
+      "dependencies": {
+        "babel-runtime": "6.x",
+        "prop-types": "^15.6.0",
+        "raf": "3.x",
+        "rc-tween-one": "^2.4.0",
+        "react-lifecycles-compat": "^3.0.4",
+        "tween-functions": "1.x"
+      }
+    },
     "node_modules/rc-select": {
       "version": "14.0.0-alpha.27",
       "resolved": "https://registry.npmjs.org/rc-select/-/rc-select-14.0.0-alpha.27.tgz",
@@ -12136,6 +12156,19 @@
         "react-dom": ">=16.9.0"
       }
     },
+    "node_modules/rc-tween-one": {
+      "version": "2.7.3",
+      "resolved": "https://registry.npmjs.org/rc-tween-one/-/rc-tween-one-2.7.3.tgz",
+      "integrity": "sha512-n4OPRLO6VMZHj61unq5KKxHMMfBz52bxob94fN3U5M9GqFg3H+T3TXnpHPnAK+cq/xBGo70ik2vB4Fpjo/txcA==",
+      "dependencies": {
+        "babel-runtime": "6.x",
+        "prop-types": "^15.6.1",
+        "raf": "~3.4.0",
+        "react-lifecycles-compat": "^3.0.4",
+        "style-utils": "~0.2.0",
+        "tween-functions": "~1.2.0"
+      }
+    },
     "node_modules/rc-upload": {
       "version": "4.3.3",
       "resolved": "https://registry.npmjs.org/rc-upload/-/rc-upload-4.3.3.tgz",
@@ -12241,8 +12274,7 @@
     "node_modules/react-lifecycles-compat": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
-      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==",
-      "dev": true
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
     "node_modules/react-native-swipeout": {
       "version": "2.3.6",
@@ -12380,6 +12412,21 @@
         "react-dom": "^16.3.0 || ^17.0.0"
       }
     },
+    "node_modules/react-transition-group": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
+      "integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/react-tween-state": {
       "version": "0.1.5",
       "resolved": "https://registry.npmjs.org/react-tween-state/-/react-tween-state-0.1.5.tgz",
@@ -14169,6 +14216,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/style-utils": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/style-utils/-/style-utils-0.2.1.tgz",
+      "integrity": "sha512-eKRIfWnUSdBqe2ko+qisUwBSlfWpHru89geRqzmScpDhkPW1ksmE04d//nDcXeF+TVK5cnBG90mMmHgxyxXleQ=="
+    },
     "node_modules/supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -14459,8 +14511,7 @@
     "node_modules/tween-functions": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/tween-functions/-/tween-functions-1.2.0.tgz",
-      "integrity": "sha1-GuOlDnxguz3vd06scHrLynO7w/8=",
-      "dev": true
+      "integrity": "sha1-GuOlDnxguz3vd06scHrLynO7w/8="
     },
     "node_modules/tweetnacl": {
       "version": "0.14.5",
@@ -17933,7 +17984,6 @@
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
       "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
-      "dev": true,
       "requires": {
         "core-js": "^2.4.0",
         "regenerator-runtime": "^0.11.0"
@@ -17942,14 +17992,12 @@
         "core-js": {
           "version": "2.6.12",
           "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
-          "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
-          "dev": true
+          "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
         },
         "regenerator-runtime": {
           "version": "0.11.1",
           "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
-          "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==",
-          "dev": true
+          "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
         }
       }
     },
@@ -18944,6 +18992,15 @@
       "resolved": "https://registry.npmjs.org/dom-align/-/dom-align-1.12.2.tgz",
       "integrity": "sha512-pHuazgqrsTFrGU2WLDdXxCFabkdQDx72ddkraZNih1KsMcN5qsRSTR9O4VJRlwTPCPb5COYg3LOfiMHHcPInHg=="
     },
+    "dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "requires": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "dom-walk": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
@@ -23788,8 +23845,7 @@
     "performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
-      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=",
-      "dev": true
+      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
     },
     "picocolors": {
       "version": "0.2.1",
@@ -24470,7 +24526,6 @@
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
       "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
-      "dev": true,
       "requires": {
         "performance-now": "^2.1.0"
       }
@@ -24760,6 +24815,19 @@
         "resize-observer-polyfill": "^1.5.1"
       }
     },
+    "rc-scroll-anim": {
+      "version": "2.7.6",
+      "resolved": "https://registry.npmjs.org/rc-scroll-anim/-/rc-scroll-anim-2.7.6.tgz",
+      "integrity": "sha512-VwXJYXjZy9TtH1wcQIG7/yjt/Ay3VEjQl/TITaWzK9O7ujjOXRVOYY/tqKshmBMgaJ2oGeFQNmCN8zTwXguq0g==",
+      "requires": {
+        "babel-runtime": "6.x",
+        "prop-types": "^15.6.0",
+        "raf": "3.x",
+        "rc-tween-one": "^2.4.0",
+        "react-lifecycles-compat": "^3.0.4",
+        "tween-functions": "1.x"
+      }
+    },
     "rc-select": {
       "version": "14.0.0-alpha.27",
       "resolved": "https://registry.npmjs.org/rc-select/-/rc-select-14.0.0-alpha.27.tgz",
@@ -24900,6 +24968,19 @@
         "rc-util": "^5.5.0"
       }
     },
+    "rc-tween-one": {
+      "version": "2.7.3",
+      "resolved": "https://registry.npmjs.org/rc-tween-one/-/rc-tween-one-2.7.3.tgz",
+      "integrity": "sha512-n4OPRLO6VMZHj61unq5KKxHMMfBz52bxob94fN3U5M9GqFg3H+T3TXnpHPnAK+cq/xBGo70ik2vB4Fpjo/txcA==",
+      "requires": {
+        "babel-runtime": "6.x",
+        "prop-types": "^15.6.1",
+        "raf": "~3.4.0",
+        "react-lifecycles-compat": "^3.0.4",
+        "style-utils": "~0.2.0",
+        "tween-functions": "~1.2.0"
+      }
+    },
     "rc-upload": {
       "version": "4.3.3",
       "resolved": "https://registry.npmjs.org/rc-upload/-/rc-upload-4.3.3.tgz",
@@ -24983,8 +25064,7 @@
     "react-lifecycles-compat": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
-      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==",
-      "dev": true
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
     "react-native-swipeout": {
       "version": "2.3.6",
@@ -25092,6 +25172,17 @@
         "prop-types": "^15.5.7"
       }
     },
+    "react-transition-group": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
+      "integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
     "react-tween-state": {
       "version": "0.1.5",
       "resolved": "https://registry.npmjs.org/react-tween-state/-/react-tween-state-0.1.5.tgz",
@@ -26596,6 +26687,11 @@
       "integrity": "sha1-XvjbKV0B5u1sv3qrlpmNeCJSe2g=",
       "dev": true
     },
+    "style-utils": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/style-utils/-/style-utils-0.2.1.tgz",
+      "integrity": "sha512-eKRIfWnUSdBqe2ko+qisUwBSlfWpHru89geRqzmScpDhkPW1ksmE04d//nDcXeF+TVK5cnBG90mMmHgxyxXleQ=="
+    },
     "supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -26827,8 +26923,7 @@
     "tween-functions": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/tween-functions/-/tween-functions-1.2.0.tgz",
-      "integrity": "sha1-GuOlDnxguz3vd06scHrLynO7w/8=",
-      "dev": true
+      "integrity": "sha1-GuOlDnxguz3vd06scHrLynO7w/8="
     },
     "tweetnacl": {
       "version": "0.14.5",
diff --git a/package.json b/package.json
index dd62937f..a094dae8 100644
--- a/package.json
+++ b/package.json
@@ -22,8 +22,10 @@
   "dependencies": {
     "@ant-design/icons": "^4.7.0",
     "@ant-design/pro-layout": "^6.5.0",
+    "rc-scroll-anim": "^2.7.6",
     "react": "17.x",
     "react-dom": "17.x",
+    "react-transition-group": "^4.4.2",
     "umi": "^3.5.20"
   },
   "devDependencies": {
@@ -31,6 +33,7 @@
     "@types/react-dom": "^17.0.0",
     "@umijs/preset-react": "1.x",
     "@umijs/test": "^3.5.20",
+    "classnames": "^2.3.1",
     "lint-staged": "^10.0.7",
     "prettier": "^2.2.0",
     "typescript": "^4.1.2",
diff --git a/src/pages/component/component2/btn.js b/src/pages/component/component2/btn.js
new file mode 100644
index 00000000..e69de29b
diff --git a/src/pages/component/component3/TabBar.js b/src/pages/component/component3/TabBar.js
index 16139333..bae7dc9f 100644
--- a/src/pages/component/component3/TabBar.js
+++ b/src/pages/component/component3/TabBar.js
@@ -45,16 +45,17 @@ export default class TabBar extends Component {
               key={item.id}
               className={this.state.current === index ? "active_xuanxiang" : ""}
               onClick={() => this.handleClick(index)}
+              event={()=>this.componentDidCatch()}  
             >
               {item.text}
             </li>
           ))}
         </ul>
-        {this.state.current === 0 && <Page1></Page1>}
-        {this.state.current === 1 && <Page2></Page2>}
-        {this.state.current === 2 && <Page3></Page3>}
-        {this.state.current === 3 && <Page4></Page4>}
-        {this.state.current === 4 && <Page5></Page5>}
+        {this.state.current === 0 && <div className='changeTab'><Page1></Page1></div>}
+        {this.state.current === 1 && <div className='changeTab'><Page2></Page2></div>}
+        {this.state.current === 2 && <div className='changeTab'><Page3></Page3></div>}
+        {this.state.current === 3 && <div className='changeTab'><Page4></Page4></div>}
+        {this.state.current === 4 && <div className='changeTab'><Page5></Page5></div>}
       </div>
     );
   }
@@ -64,4 +65,13 @@ export default class TabBar extends Component {
       current: index,
     });
   }
+  componentDidCatch(loop){
+        if(loop=false){
+          this.index+1;
+           if(index>4){
+              index=0;
+           }
+        }
+  }
 }
+          
\ No newline at end of file
diff --git a/src/pages/component/component3/TabBar/page1.js b/src/pages/component/component3/TabBar/page1.js
index 0239477f..5f21ab50 100644
--- a/src/pages/component/component3/TabBar/page1.js
+++ b/src/pages/component/component3/TabBar/page1.js
@@ -49,7 +49,7 @@ export default class Page1 extends Component {
           <img src={require("../../../../assets/img/2.png")}></img>
           <video
             src="https://video.educoder.net/sv/20821c44-1775248f8e1/20821c44-1775248f8e1.mp4"
-            autoplay="autoplay" loop='loop' muted='muted'
+            autoplay="autoplay" loop='true' muted='muted'
           ></video>
         </div>
       </div>
diff --git a/src/pages/component/component3/TabBar/page5.js b/src/pages/component/component3/TabBar/page5.js
index 78dfec70..46251aab 100644
--- a/src/pages/component/component3/TabBar/page5.js
+++ b/src/pages/component/component3/TabBar/page5.js
@@ -47,9 +47,9 @@ export default class Page5 extends Component {
         </div>
         <div className="TabBar_page1_right">
           <img src={require("../../../../assets/img/2.png")}></img>
-          <video
+          <video 
             src="https://video.educoder.net/sv/3fcef362-17759076bd9/3fcef362-17759076bd9.mp4"
-            autoplay="autoplay" loop='loop' muted='muted'
+            autoplay="autoplay" loop='loop' muted='muted' 
           ></video>
         </div>
       </div>
diff --git a/src/pages/component/mycomponent/animationByCss.js b/src/pages/component/mycomponent/animationByCss.js
new file mode 100644
index 00000000..953da301
--- /dev/null
+++ b/src/pages/component/mycomponent/animationByCss.js
@@ -0,0 +1,33 @@
+import React, { Component } from 'react'
+import { CSSTransition } from 'react-transition-group'
+
+export default class AnimationByCss extends Component {
+	constructor(props){
+		super(props)
+		this.state = {
+			show:false
+		}
+	}
+	hander = () => {
+	    this.setState({
+	      show:!this.state.show
+	    })
+	}
+	render() {
+	    let { show } = this.state
+	    return (
+	      <div>
+	        <CSSTransition
+			    in={this.state.show=true} // 如果this.state.show从false变为true，则动画入场，反之出场动画
+	            timeout={1000} //动画执行1秒
+	            classNames='fade' //自定义的class名
+	            unmountOnExit // 当动画出场后在页面上移除包裹的dom节点
+	            onEntered={(el) => { }} // 入场动画执行完毕的回调
+	            onExited={(el) => { }} // 出场动画执行完毕的回调
+	        >
+	          <div className='main'></div>
+	        </CSSTransition>
+	      </div>
+	    )
+	}
+}
diff --git a/src/pages/index.css b/src/pages/index.css
index 186a32d2..1ee221e2 100644
--- a/src/pages/index.css
+++ b/src/pages/index.css
@@ -521,4 +521,58 @@ footer{
     height: 40px;
     background-color: cornsilk;
     color: cyan;
-}
\ No newline at end of file
+}
+/*动画区*/
+.shoppingCart_button {
+    width: 100px;
+    padding: 10px 10px;
+    border: 1px #eee solid;
+    cursor: pointer;
+    user-select: none;
+    margin-bottom: 50px
+  }
+  
+  /*被执行元素默认样式*/
+  .main {
+    opacity: 0;
+    transform: translateX(200px);
+    transition: all 0.5s linear;
+    width: 400px;
+    height: 400px;
+    background-color: #000;
+    border: 1px #eee solid;
+    border-radius: 10px
+  }
+  
+  /*enter：入场前*/
+  .fade-enter {
+    opacity: 0;
+  }
+  
+  /*enter-active：入场后到入场结束*/
+  .fade-enter-active {
+    transform: translateX(0px);
+    opacity: 1;
+  }
+  
+  /*enter-done：入场动画执行完毕后，保持状态*/
+  .fade-enter-done {
+    transform: translateX(0px);
+    opacity: 1;
+  }
+  
+  /*enter：出场前*/
+  .fade-exit {
+    opacity: 1;
+  }
+  
+  /*enter-active：出场后到出场结束*/
+  .fade-exit-active {
+    transform: translateX(200px);
+    opacity: 0;
+  }
+  
+  /*enter-done：出场动画执行完毕后，保持状态*/
+  .fade-exit-done {
+    opacity: 0;
+  }
\ No newline at end of file
diff --git a/src/pages/index.less b/src/pages/index.less
index 586302bf..6a66614e 100644
--- a/src/pages/index.less
+++ b/src/pages/index.less
@@ -1,3 +1,28 @@
 .title {
   background: rgb(121, 242, 157);
 }
+.leftButton {
+  margin-top: 310px;
+  border: none;
+  outline: 0;
+  padding: 0;
+  height: 36px;
+  width: 36px;
+  transition: 3s;
+  border-radius: 50%;
+  background-color: #f8f8ff;
+  color: #ff0000;
+  position: absolute;
+  top: 50%;
+  z-index: 10;
+  transform: translateY(-50%);
+  text-align: center;
+  font-size: 12px;
+  cursor: pointer; // 鼠标指针移上去显示为“小手”
+  opacity: 0.05;  // 默认不透明度0.05，几乎不可见
+}
+
+// 鼠标悬浮上去不透明度变为1，可见
+.leftButton:hover {
+  opacity: 1;
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index cf7ea4eb..7e9b6fee 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -9,6 +9,7 @@ import Content4 from "./component/component5/content4.js";
 import Content5 from "./component/component6/content5.js";
 import Footer  from "./component/component7/Footer.js";
 import Fixed from './component/conponent9/Fixed.js'
+import AnimationByCss from './component/mycomponent/animationByCss.js'
 
 export default function IndexPage() {
   return (
@@ -24,3 +25,5 @@ export default function IndexPage() {
     </div>
   );
 }
+
+
diff --git a/yarn.lock b/yarn.lock
index 090a0e65..eadec353 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -310,7 +310,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.1", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.4", "@babel/runtime@^7.11.1", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.2.0", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.1", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.4", "@babel/runtime@^7.11.1", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.2.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   "integrity" "sha512-hzeyJyMA1YGdJTuWU0e/j4wKXrU4OMFvY2MSlaI9B7VQb0r5cxTE3EAIS2Q7Tn2RIcDkRvTA/v2JsAEhxe99uw=="
   "resolved" "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.2.tgz"
   "version" "7.17.2"
@@ -2643,6 +2643,14 @@
   "resolved" "https://registry.npmjs.org/dom-align/-/dom-align-1.12.2.tgz"
   "version" "1.12.2"
 
+"dom-helpers@^5.0.1":
+  "integrity" "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA=="
+  "resolved" "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz"
+  "version" "5.2.1"
+  dependencies:
+    "@babel/runtime" "^7.8.7"
+    "csstype" "^3.0.2"
+
 "dom-walk@^0.1.0":
   "integrity" "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
   "resolved" "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz"
@@ -5921,7 +5929,7 @@
     "kleur" "^3.0.3"
     "sisteransi" "^1.0.5"
 
-"prop-types@^15.0.0", "prop-types@^15.5.10", "prop-types@^15.5.4", "prop-types@^15.5.6", "prop-types@^15.5.7", "prop-types@^15.5.8", "prop-types@^15.6.2", "prop-types@^15.7.2", "prop-types@15.x":
+"prop-types@^15.0.0", "prop-types@^15.5.10", "prop-types@^15.5.4", "prop-types@^15.5.6", "prop-types@^15.5.7", "prop-types@^15.5.8", "prop-types@^15.6.0", "prop-types@^15.6.1", "prop-types@^15.6.2", "prop-types@^15.7.2", "prop-types@15.x":
   "integrity" "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg=="
   "resolved" "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
   "version" "15.8.1"
@@ -6015,7 +6023,7 @@
   "resolved" "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz"
   "version" "0.2.0"
 
-"raf@^3.1.0", "raf@^3.3.2", "raf@^3.4.0":
+"raf@^3.1.0", "raf@^3.3.2", "raf@^3.4.0", "raf@~3.4.0", "raf@3.x":
   "integrity" "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA=="
   "resolved" "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz"
   "version" "3.4.1"
@@ -6290,6 +6298,18 @@
     "rc-util" "^5.15.0"
     "resize-observer-polyfill" "^1.5.1"
 
+"rc-scroll-anim@^2.7.6":
+  "integrity" "sha512-VwXJYXjZy9TtH1wcQIG7/yjt/Ay3VEjQl/TITaWzK9O7ujjOXRVOYY/tqKshmBMgaJ2oGeFQNmCN8zTwXguq0g=="
+  "resolved" "https://registry.npmjs.org/rc-scroll-anim/-/rc-scroll-anim-2.7.6.tgz"
+  "version" "2.7.6"
+  dependencies:
+    "babel-runtime" "6.x"
+    "prop-types" "^15.6.0"
+    "raf" "3.x"
+    "rc-tween-one" "^2.4.0"
+    "react-lifecycles-compat" "^3.0.4"
+    "tween-functions" "1.x"
+
 "rc-select@~14.0.0-alpha.15", "rc-select@~14.0.0-alpha.23", "rc-select@~14.0.0-alpha.8":
   "integrity" "sha512-vXf7i0+2PCYSLTFJhJAPPRSo5a2hVbSaaMqHryEH4omcqnx7XgfAtSlzN3vdMGxuEokibM6S2PrRRipVvLkBgg=="
   "resolved" "https://registry.npmjs.org/rc-select/-/rc-select-14.0.0-alpha.27.tgz"
@@ -6452,6 +6472,18 @@
     "rc-motion" "^2.0.0"
     "rc-util" "^5.5.0"
 
+"rc-tween-one@^2.4.0":
+  "integrity" "sha512-n4OPRLO6VMZHj61unq5KKxHMMfBz52bxob94fN3U5M9GqFg3H+T3TXnpHPnAK+cq/xBGo70ik2vB4Fpjo/txcA=="
+  "resolved" "https://registry.npmjs.org/rc-tween-one/-/rc-tween-one-2.7.3.tgz"
+  "version" "2.7.3"
+  dependencies:
+    "babel-runtime" "6.x"
+    "prop-types" "^15.6.1"
+    "raf" "~3.4.0"
+    "react-lifecycles-compat" "^3.0.4"
+    "style-utils" "~0.2.0"
+    "tween-functions" "~1.2.0"
+
 "rc-upload@~4.3.0":
   "integrity" "sha512-YoJ0phCRenMj1nzwalXzciKZ9/FAaCrFu84dS5pphwucTC8GUWClcDID/WWNGsLFcM97NqIboDqrV82rVRhW/w=="
   "resolved" "https://registry.npmjs.org/rc-upload/-/rc-upload-4.3.3.tgz"
@@ -6512,7 +6544,7 @@
     "rc-resize-observer" "^1.0.0"
     "rc-util" "^5.0.7"
 
-"react-dom@*", "react-dom@^16.3.0 || ^17.0.0", "react-dom@>=16.0.0", "react-dom@>=16.9.0", "react-dom@16.x || 17.x", "react-dom@17.x":
+"react-dom@*", "react-dom@^16.3.0 || ^17.0.0", "react-dom@>=16.0.0", "react-dom@>=16.6.0", "react-dom@>=16.9.0", "react-dom@16.x || 17.x", "react-dom@17.x":
   "integrity" "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA=="
   "resolved" "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz"
   "version" "17.0.2"
@@ -6680,6 +6712,16 @@
     "invariant" "^2.2.4"
     "prop-types" "^15.5.7"
 
+"react-transition-group@^4.4.2":
+  "integrity" "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg=="
+  "resolved" "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz"
+  "version" "4.4.2"
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    "dom-helpers" "^5.0.1"
+    "loose-envify" "^1.4.0"
+    "prop-types" "^15.6.2"
+
 "react-tween-state@^0.1.5":
   "integrity" "sha1-6YsGZVHvuTy5LdG+FJlcLj3q4zk="
   "resolved" "https://registry.npmjs.org/react-tween-state/-/react-tween-state-0.1.5.tgz"
@@ -6688,7 +6730,7 @@
     "raf" "^3.1.0"
     "tween-functions" "^1.0.1"
 
-"react@*", "react@^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0", "react@^16.11.0 || ^17.0.0 || ^18.0.0", "react@^16.3.0 || ^17.0.0", "react@^16.8.0 || ^17.0.0", "react@^16.8.3 || ^17", "react@>=15", "react@>=16.0.0", "react@>=16.3.0", "react@>=16.9.0", "react@16.x || 17.x", "react@17.0.2", "react@17.x":
+"react@*", "react@^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0", "react@^16.11.0 || ^17.0.0 || ^18.0.0", "react@^16.3.0 || ^17.0.0", "react@^16.8.0 || ^17.0.0", "react@^16.8.3 || ^17", "react@>=15", "react@>=16.0.0", "react@>=16.3.0", "react@>=16.6.0", "react@>=16.9.0", "react@16.x || 17.x", "react@17.0.2", "react@17.x":
   "integrity" "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA=="
   "resolved" "https://registry.npmjs.org/react/-/react-17.0.2.tgz"
   "version" "17.0.2"
@@ -7709,6 +7751,11 @@
   "resolved" "https://registry.npmjs.org/strip-indent/-/strip-indent-2.0.0.tgz"
   "version" "2.0.0"
 
+"style-utils@~0.2.0":
+  "integrity" "sha512-eKRIfWnUSdBqe2ko+qisUwBSlfWpHru89geRqzmScpDhkPW1ksmE04d//nDcXeF+TVK5cnBG90mMmHgxyxXleQ=="
+  "resolved" "https://registry.npmjs.org/style-utils/-/style-utils-0.2.1.tgz"
+  "version" "0.2.1"
+
 "supports-color@^5.3.0":
   "integrity" "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow=="
   "resolved" "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz"
@@ -7932,7 +7979,7 @@
   dependencies:
     "safe-buffer" "^5.0.1"
 
-"tween-functions@^1.0.1":
+"tween-functions@^1.0.1", "tween-functions@~1.2.0", "tween-functions@1.x":
   "integrity" "sha1-GuOlDnxguz3vd06scHrLynO7w/8="
   "resolved" "https://registry.npmjs.org/tween-functions/-/tween-functions-1.2.0.tgz"
   "version" "1.2.0"