feat: add global page toggling animation

src/App.vue

@@ -19,8 +19,8 @@ export default {
 </script>
 
 <style lang="less">
-  //拖拽控件全局样式
   :global{
+    //拖拽控件全局样式
     .dragable-ghost{
       border: 1px dashed #aaaaaa;
       opacity: 0.65;
@@ -33,5 +33,16 @@ export default {
       border: 1px dashed #aaaaaa;
       opacity: 0.65;
     }
+    //页面切换动画
+    .page-toggle-enter-active{
+      transition: all 0.2s ease-in 0.25s;
+    }
+    .page-toggle-leave-active{
+      transition: all 0.2s ease-out 0s;
+    }
+    .page-toggle-enter, .page-toggle-leave-to{
+      opacity: 0;
+      padding: 0px;
+    }
   }
 </style>

src/components/layout/MenuView.vue

@@ -1,6 +1,8 @@
 <template>
   <global-layout>
+    <transition name="page-toggle">
     <router-view />
+    </transition>
   </global-layout>
 </template>
 

src/components/layout/PageView.vue

@@ -3,7 +3,9 @@
     <div slot="extra" class="extraImg">
       <img :src="extraImage"/>
     </div>
-    <router-view  ref="page"/>
+    <transition name="page-toggle">
+      <router-view  ref="page"/>
+    </transition>
   </page-layout>
 </template>
 

src/components/layout/RouteView.vue

@@ -1,5 +1,7 @@
 <template>
+  <transition name="page-toggle">
   <router-view />
+  </transition>
 </template>
 
 <script>