“更多内容”页的淡出视频

src/views/HomeView.vue

@@ -246,7 +246,7 @@
         v-if="isShowVideoFadeToNextPage"
         ref="videoFadeToNextPageEl"
         class="fade-to-next-page"
-        src="@/assets/videos/fadeFromHomeToMoreContent.mp4"
+        src="@/assets/videos/fade-from-home-to-more-content.mp4"
         playsinline
         webkit-playsinline="true"
         x5-video-player-type="h5"

src/views/MoreContent.vue

@@ -36,9 +36,7 @@
       >
         <button
           class="watch-detail"
-          @click="router.push({
-            name: 'ShuanggouDetail',
-          })"
+          @click="onClickShuangGouEntry"
         >
           查看详情
         </button>
@@ -56,23 +54,17 @@
         <div class="button-group">
           <button
             class="poem"
-            @click="router.push({
-              name: 'PoemList'
-            })"
+            @click="onClickEntryAtMoZhu('PoemList')"
           >
             人文
           </button>
           <button
-            @click="router.push({
-              name: 'PaintingList'
-            })"
+            @click="onClickEntryAtMoZhu('PaintingList')"
           >
             画作
           </button>
           <button
-            @click="router.push({
-              name: 'BambooBook',
-            })"
+            @click="onClickEntryAtMoZhu('BambooBook')"
           >
             竹谱
           </button>
@@ -94,11 +86,37 @@
       :is-show="isShowOperationTip"
       :color="'green'"
     />
+
+    <Transition name="fade-in">
+      <video
+        v-if="isShowVideoFadeAtShuangGou"
+        ref="videoFadeAtShuangGouEl"
+        class="fade-to-other-page"
+        src="@/assets/videos/fade-at-shuang-gou.mp4"
+        playsinline
+        webkit-playsinline="true"
+        x5-video-player-type="h5"
+        @ended="router.push({
+          name: 'ShuanggouDetail',
+        })"
+      />
+    </Transition>
+    <Transition name="fade-in">
+      <video
+        v-if="isShowVideoFadeAtMoZhu"
+        ref="videoFadeAtMoZhuEl"
+        class="fade-to-other-page"
+        src="@/assets/videos/fade-at-mo-zhu.mp4"
+        playsinline
+        webkit-playsinline="true"
+        x5-video-player-type="h5"
+      />
+    </Transition>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, watch, onMounted, onBeforeUnmount, inject } from "vue"
+import { ref, computed, watch, onMounted, onBeforeUnmount, inject, nextTick } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
 import PoemList from '@/views/PoemList.vue'
@@ -169,6 +187,29 @@ const unwatch = watch(translateLength, (v) => {
   // }
 })
 
+const videoFadeAtShuangGouEl = ref(null)
+const isShowVideoFadeAtShuangGou = ref(false)
+function onClickShuangGouEntry() {
+  isShowVideoFadeAtShuangGou.value = true
+  nextTick(() => {
+    videoFadeAtShuangGouEl.value.play()
+  })
+}
+
+const videoFadeAtMoZhuEl = ref(null)
+const isShowVideoFadeAtMoZhu = ref(false)
+function onClickEntryAtMoZhu(pathName) {
+  isShowVideoFadeAtMoZhu.value = true
+  nextTick(() => {
+    videoFadeAtMoZhuEl.value.addEventListener('ended', () => {
+      router.push({
+        name: pathName,
+      })
+    })
+    videoFadeAtMoZhuEl.value.play()
+  })
+}
+
 /**
  * 左滑跳转新页面
  */
@@ -272,10 +313,18 @@ const touchMove = (event) => {
       }
     }
   }
-  .operation-tip{
+  >.operation-tip{
     position: absolute;
     right: calc(44 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     bottom: calc(74 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
   }
+  >.fade-to-other-page{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
 }
 </style>