Add animation for router change

src/renderer/App.css

@@ -23,9 +23,26 @@ body {
   margin-left: 80px;
 }
 
+.banner {
+  margin-top: 70px;
+  margin-bottom: -65px;
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity .2s;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}
+
 @media only screen and (max-width: 680px) {
   .expand, .routerView {
     margin-left: 0px;
     margin-bottom: 80px;
   }
+
+  .banner {
+    margin-top: 70px;
+    margin-bottom: -65px;
+  }
 }

src/renderer/App.vue

@@ -8,9 +8,9 @@
   >
     <top-nav ref="topNav" />
     <side-nav ref="sideNav" />
-    <Transition
+    <transition
       mode="out-in"
-      name="slide-up"
+      name="fade"
     >
       <!-- <keep-alive> -->
       <RouterView
@@ -19,7 +19,7 @@
         :class="{ expand: !isOpen }"
       />
       <!-- </keep-alive> -->
-    </Transition>
+    </transition>
     <ft-toast />
     <ft-progress-bar
       v-if="showProgressBar"