添加页面过渡动画

src/style/common.css

@@ -55,4 +55,25 @@
   -moz-box-shadow: 0 0 4px #0000004d;
   box-shadow: 0 0 4px #0000004d;
   padding: 10px 20px;
+}
+
+/* fade-transform */
+.fade-transform--move,
+.fade-transform-leave-active,
+.fade-transform-enter-active {
+  transition: all .5s;
+}
+
+.fade-transform-leave-active {
+  position: absolute;
+}
+
+.fade-transform-enter {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.fade-transform-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
 }

src/views/HomeView.vue

@@ -28,7 +28,9 @@
         </a-layout-sider>
         <!-- 内容 -->
         <a-layout-content class="home-page">
-          <router-view />
+          <Transition name="fade-transform" mode="out-in">
+            <router-view :key="$route.matched[1].name" />
+          </transition>
         </a-layout-content>
       </a-layout>
     </a-layout>