【开场视频】“跳过”按钮显隐逻辑优化

.env.prod

@@ -1,3 +1,3 @@
 CLI_MODE=prod
 NODE_ENV=production
-PUBLIC_PATH=/
+PUBLIC_PATH=./

.env.test

@@ -1,3 +1,3 @@
 CLI_MODE=test
 NODE_ENV=production
-PUBLIC_PATH=/
+PUBLIC_PATH=./

src/App.vue

@@ -81,6 +81,13 @@ export default {
   opacity: 0;
 }
 
+.fade-in-enter-active {
+  transition: opacity 1s;
+}
+.fade-in-enter-from {
+  opacity: 0;
+}
+
 // // 不断渐变显隐 animation
 // .animation-show-hide {
 //   animation: show-hide 1.8s infinite;

src/components/StartUp.vue

@@ -17,19 +17,23 @@
       v-show="isBeginVideo"
       ref="startup-video"
       src="@/assets/videos/startup-video.mp4"
+      @play="onVideoPlay"
       @ended="onStartupOver"
     />
-    <button
-      class="skip"
-      @click="onStartupOver"
-    >
-      <img
-        class=""
-        src="@/assets/images/btn-skip.png"
-        alt=""
-        draggable="false"
+    <transition name="fade-in">
+      <button
+        v-show="isShowSkip"
+        class="skip"
+        @click="onStartupOver"
       >
-    </button>
+        <img
+          class=""
+          src="@/assets/images/btn-skip.png"
+          alt=""
+          draggable="false"
+        >
+      </button>
+    </transition>
   </div>
 </template>
 
@@ -39,7 +43,8 @@ export default {
   emits: ['over'],
   data() {
     return {
-      isBeginVideo: false
+      isBeginVideo: false,
+      isShowSkip: false,
     }
   },
   methods: {
@@ -47,6 +52,11 @@ export default {
       this.isBeginVideo = true
       this.$refs['startup-video'].play()
     },
+    onVideoPlay() {
+      setTimeout(() => {
+        this.isShowSkip = true
+      }, 3000)
+    },
     onStartupOver() {
       this.$emit('over')
     }