切换场景时的过渡效果

src/App.vue

@@ -100,6 +100,20 @@ const store = useStore()
   opacity: 0;
 }
 
+.fade-in-out-slow-enter-active {
+  transition: opacity 1.5s;
+}
+.fade-in-out-slow-leave-active {
+  transition: opacity 1.5s;
+  pointer-events: none;
+}
+.fade-in-out-slow-enter-from {
+  opacity: 0;
+}
+.fade-in-out-slow-leave-to {
+  opacity: 0;
+}
+
 // 不断渐变显隐 animation
 .animation-show-hide {
   animation: show-hide 1.8s infinite;

src/views/PanoView.vue

@@ -152,6 +152,59 @@
       class="camera-content"
       @close="showingContentIdx = 0"
     />
+
+    <transition name="fade-in-out-slow">
+      <video
+        v-show="isShowEffectVideo1"
+        ref="sceneChangeEffectVideo1"
+        class="sceneChangeEffectVideo"
+        load="lazy"
+        src="@/assets/videos/scene-change-effect-1.mp4"
+        playsinline
+        webkit-playsinline="true"
+        x5-video-player-type="h5"
+        @ended="onEffectVideoEnd"
+      />
+    </transition>
+    <transition name="fade-in-out-slow">
+      <video
+        v-show="isShowEffectVideo2"
+        ref="sceneChangeEffectVideo2"
+        class="sceneChangeEffectVideo"
+        src="@/assets/videos/scene-change-effect-2.mp4"
+        playsinline
+        webkit-playsinline="true"
+        x5-video-player-type="h5"
+        @ended="onEffectVideoEnd"
+      />
+    </transition>
+    <transition name="cloud-top">
+      <img
+        v-if="isShowEffectCloud"
+        class="cloud cloud-top"
+        src="@/assets/images/cloud-top.png"
+        alt=""
+        draggable="false"
+      >
+    </transition>
+    <transition name="cloud-left-bottom">
+      <img
+        v-if="isShowEffectCloud"
+        class="cloud-left-bottom"
+        src="@/assets/images/cloud-left-bottom.png"
+        alt=""
+        draggable="false"
+      >
+    </transition>
+    <transition name="cloud-right-bottom">
+      <img
+        v-if="isShowEffectCloud"
+        class="cloud-right-bottom"
+        src="@/assets/images/cloud-right-bottom.png"
+        alt=""
+        draggable="false"
+      >
+    </transition>
   </div>
 </template>
 
@@ -289,17 +342,41 @@ const currentCameraList = computed(() => {
 
 const mouseEnterCameraItemIdx = ref(-1)
 
+const sceneChangeEffectVideo1 = ref(null)
+const sceneChangeEffectVideo2 = ref(null)
+const isShowEffectVideo1 = ref(false)
+const isShowEffectVideo2 = ref(false)
+const isShowEffectCloud = ref(false)
 function onClickNextCamera() {
-  if (sceneIdx.value < 2) {
-    router.push({
-      name: route.name,
-      query: {
-        sceneIdx: sceneIdx.value + 1,
-        cameraIdx: 1,
-      }
-    })
+  if (sceneIdx.value === 0) {
+    isShowEffectVideo1.value = true
+    setTimeout(() => {
+      sceneChangeEffectVideo1.value.play()
+    }, 1000)
+  } else if (sceneIdx.value === 1) {
+    isShowEffectVideo2.value = true
+    setTimeout(() => {
+      sceneChangeEffectVideo2.value.play()
+    }, 1000)
   }
 }
+function onEffectVideoEnd() {
+  isShowEffectCloud.value = true
+  router.push({
+    name: route.name,
+    query: {
+      sceneIdx: Number(route.query.sceneIdx) + 1,
+      cameraIdx: 0,
+    }
+  })
+  setTimeout(() => {
+    isShowEffectVideo1.value = false
+    isShowEffectVideo2.value = false
+  }, 1000)
+  setTimeout(() => {
+    isShowEffectCloud.value = false
+  }, 2500)
+}
 
 /**
  * 全景图
@@ -701,6 +778,87 @@ onBeforeRouteUpdate((to, from) => {
   >.camera-content{
     z-index: 10;
   }
+  >video.sceneChangeEffectVideo{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: black;
+    z-index: 11;
+  }
+
+  .cloud-top{
+    position: absolute;
+    width: 100%;
+    top: 0;
+    left: 0;
+    z-index: 12;
+  }
+  .cloud-top-enter-active {
+    transition: all 1.5s;
+  }
+  .cloud-top-leave-active {
+    transition: all 1.5s;
+    pointer-events: none;
+  }
+  .cloud-top-enter-from {
+    opacity: 0;
+    translate: 0 -100%;
+  }
+  .cloud-top-leave-to {
+    opacity: 0;
+    top: -50%;
+    translate: 0 -100%;
+  }
+
+  .cloud-left-bottom{
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    height: 70%;
+    z-index: 12;
+  }
+  .cloud-left-bottom-enter-active {
+    transition: all 1.5s;
+  }
+  .cloud-left-bottom-leave-active {
+    transition: all 1.5s;
+    pointer-events: none;
+  }
+  .cloud-left-bottom-enter-from {
+    opacity: 0;
+    translate: -100% 100%;
+  }
+  .cloud-left-bottom-leave-to {
+    opacity: 0;
+    pointer-events: none;
+    translate: -100% 100%;
+  }
+
+  .cloud-right-bottom{
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    height: 95%;
+    z-index: 12;
+  }
+  .cloud-right-bottom-enter-active {
+    transition: all 1.5s;
+  }
+  .cloud-right-bottom-leave-active {
+    transition: all 1.5s;
+    pointer-events: none;
+  }
+  .cloud-right-bottom-enter-from {
+    opacity: 0;
+    translate: 100% 100%;
+  }
+  .cloud-right-bottom-leave-to {
+    opacity: 0;
+    pointer-events: none;
+    translate: 100% 100%;
+  }
 }
 @keyframes character-default-animation {
   0% {