开场视频结束后自动隐藏

src/App.vue

@@ -46,4 +46,11 @@ body {
   // 有必要给resizer设置border_radius吗？
 	::-webkit-scrollbar-resizer { background: transparent; border-radius: 6px; }
 }
+
+.fade-out-leave-active {
+  transition: opacity 1.2s;
+}
+.fade-out-leave-to {
+  opacity: 0;
+}
 </style>

src/views/HomeView.vue

@@ -1,26 +1,29 @@
 <template>
   <div class="home">
-    <div
-      v-if="isShowVideo"
-      class="video-wrap"
-    >
-      <video
-        id="VideoDom"
-        src="@/assets/videos/swkk-fade-in-video.mp4"
-        muted
-        autoplay
-        playsinline
-        x5-playsinline
-        webkit-playsinline
-      />
-      <button
-        class="skip"
-        :class="{ active: isShowSkip }"
-        @click="isShowVideo = false"
+    <transition name="fade-out">
+      <div
+        v-if="isShowVideo"
+        class="video-wrap"
       >
-        <span>跳过</span>
-      </button>
-    </div>
+        <video
+          id="VideoDom"
+          src="@/assets/videos/swkk-fade-in-video.mp4"
+          muted
+          autoplay
+          playsinline
+          x5-playsinline
+          webkit-playsinline
+          @ended="isShowVideo = false"
+        />
+        <button
+          class="skip"
+          :class="{ active: isShowSkip }"
+          @click="isShowVideo = false"
+        >
+          <span>跳过</span>
+        </button>
+      </div>
+    </transition>
 
     <img
       class="title"