启动页到首页添加过渡效果

src/App.vue

@@ -29,7 +29,10 @@
         ExhitionDetailVideo
       </router-link>
     </div>
-    <transition :name="transitionName">
+    <transition
+      :name="transitionName"
+      :mode="transitionMode"
+    >
       <router-view />
     </transition>
     <img
@@ -45,14 +48,20 @@ export default {
   data() {
     return {
       transitionName: '',
+      transitionMode: '',
     }
   },
   watch: {
     '$route' (to, from) {
-      if (from.name === 'Home' && to.name === 'TreeAnimation') {
+      if (from.name === 'AppCover' && to.name === 'Home') {
+        this.transitionName = 'fade-out-in'
+        this.transitionMode = 'out-in'
+      } else if (from.name === 'Home' && to.name === 'TreeAnimation') {
         this.transitionName = 'slide-to-next-page'
+        this.transitionMode = ''
       } else {
         this.transitionName = ''
+        this.transitionMode = ''
       }
     }
   },
@@ -120,6 +129,30 @@ html,body{
   transition: top 1s;
 }
 
+.fade-out-in-enter {
+  opacity: 0;
+}
+
+.fade-out-in-enter-to {
+  opacity: 1;
+}
+
+.fade-out-in-enter-active {
+  transition: opacity 1s;
+}
+
+.fade-out-in-leave {
+  opacity: 1;
+}
+
+.fade-out-in-leave-to {
+  opacity: 0;
+}
+
+.fade-out-in-leave-active {
+  transition: opacity 1s;
+}
+
 .background-image {
   position: fixed;
   left: 0;