第一页到第二页的过渡视频

README.md

@@ -6,10 +6,6 @@
 ## 任一存的todos
 
 ### 优化
-拼音问题
-
-首页热点详情的背景色问题
-
 内容扩展页 按钮边框
 
 内容扩展页 落叶开发

src/views/HomeView.vue

@@ -185,6 +185,7 @@
     <div
       class="fixed-desc summary-desc"
       :style="{
+        top: `${(paintingTop + 550) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
         opacity: summaryOpacity,
       }"
     >
@@ -201,6 +202,8 @@
     <div
       ref="scrollerEl"
       class="scroller"
+      @touchstart="handletouchstart($event)"
+      @touchmove="touchMove($event)"
     >
       <div class="inner" />
     </div>
@@ -237,11 +240,26 @@
         @close="isShowHotspotDetail3 = false"
       />
     </Transition>
+
+    <Transition name="fade-in">
+      <video
+        v-if="isShowVideoFadeToNextPage"
+        ref="videoFadeToNextPageEl"
+        class="fade-to-next-page"
+        src="@/assets/videos/fadeFromHomeToMoreContent.mp4"
+        playsinline
+        webkit-playsinline="true"
+        x5-video-player-type="h5"
+        @ended="router.push({
+          name: 'MoreContent',
+        })"
+      />
+    </Transition>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, watch, onMounted, inject, onBeforeUnmount } from "vue"
+import { ref, computed, watch, onMounted, inject, onBeforeUnmount, onUnmounted, nextTick } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
 import Startup from '@/views/StartupView.vue'
@@ -286,11 +304,6 @@ watch(scrollerElScrollTop, (v) => {
   if (v > 0) {
     isShowOperationTip.value = false
   }
-  if (Math.abs(v - (scrollerEl.value.scrollHeight - scrollerEl.value.clientHeight)) <= 1) {
-    router.push({
-      name: 'MoreContent',
-    })
-  }
 })
 
 const isStartupInvisible = computed(() => {
@@ -441,6 +454,33 @@ function showBigPainting() {
   })
 }
 
+/**
+ * 上滑跳转新页面
+ */
+const videoFadeToNextPageEl = ref(null)
+const isShowVideoFadeToNextPage = ref(false)
+const fingerPosYWhenTouchStart = ref(0)
+const isAtBottomWhenTouchStart = ref(false)
+const handletouchstart = (event) => {
+  fingerPosYWhenTouchStart.value = event.changedTouches[0].pageY
+  if (Math.abs(scrollerEl.value.scrollTop + scrollerEl.value.clientHeight - scrollerEl.value.scrollHeight) <= 1) {
+    isAtBottomWhenTouchStart.value = true
+  } else {
+    isAtBottomWhenTouchStart.value = false
+  }
+}
+const touchMove = (event) => {
+  let currentY = event.changedTouches[0].pageY
+  let tY = currentY - fingerPosYWhenTouchStart.value
+  if (tY < -15 && isAtBottomWhenTouchStart.value) {
+    isShowVideoFadeToNextPage.value = true
+    nextTick(() => {
+      videoFadeToNextPageEl.value.play()
+    })
+  }
+}
+
+
 </script>
 
 <style lang="less" scoped>
@@ -643,7 +683,7 @@ function showBigPainting() {
     overflow: auto;
     >.inner{
       width: 100%;
-      height: 1000%;
+      height: 1050%;
     }
   }
   >.hotspot-detail{
@@ -652,5 +692,14 @@ function showBigPainting() {
   >.hotspot-detail.painting-detail{
     backdrop-filter: blur(calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')));
   }
+  >.fade-to-next-page{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    z-index: 20;
+  }
 }
 </style>