处理firefox上序列帧先上一帧hide再下一帧show的问题

src/views/AppCover.vue

@@ -27,7 +27,7 @@
     > -->
     <img
       v-for="index of 204"
-      v-show="(index - 1) === currentFrameIdx"
+      v-show="(index - 1) === currentFrameIdx || (index -1) === (currentFrameIdx - 1)"
       :key="index"
       class="frame"
       :src="`${$publicPath}start-up-frames/开头mg_${(index-1).toString().padStart(4, '0')}.jpg`"

src/views/ExhibitionDetailAnimation.vue

@@ -3,7 +3,7 @@
     <h2>金色中国—中国古代金器大展</h2>
     <img
       v-for="index of 151"
-      v-show="(index - 1) === currentFrameIdx"
+      v-show="index - 1 === currentFrameIdx || index - 1 === currentFrameIdx - 1"
       :key="index"
       :src="`${$publicPath}hand-rotate-frames/s/涂鸦手势${(index - 1).toString().padStart(4, '0')}.jpg`"
       alt=""

src/views/Home.vue

@@ -25,17 +25,16 @@
       src="@/assets/image/博物馆的力量.png"
       alt=""
     >
-    <div class="slide-tip-emerge">
-      <img
-        v-for="index of 20"
-        v-show="currentFrameIdx === index - 1"
-        :key="index"
-        :src="`${$publicPath}wenmai-frames/Abstract Element _${(index - 1).toString().padStart(4, '0')}.png`"
-        alt=""
-        @load="onImgLoad(index - 1)"
-        @error="onImgError(index - 1)"
-      >
-    </div>
+    <img
+      v-for="index of 20"
+      v-show="(currentFrameIdx === index - 1) || (currentFrameIdx - 1 === index - 1)"
+      :key="index"
+      class="slide-tip-emerge"
+      :src="`${$publicPath}wenmai-frames/Abstract Element _${(index - 1).toString().padStart(4, '0')}.png`"
+      alt=""
+      @load="onImgLoad(index - 1)"
+      @error="onImgError(index - 1)"
+    >
     <SlideTip v-if="currentFrameIdx >= 20" />
     <div class="bottom-wrapper">
       <img
@@ -149,10 +148,7 @@ export default {
     left: 50%;
     bottom: 10rem;
     transform: translateX(-50%);
-    img {
-      display: inline-block;
-      width: 8rem;
-    }
+    width: 8rem;
   }
   .bottom-wrapper {
     position: absolute;

src/views/TreeSelection.vue

@@ -57,7 +57,10 @@
       >
         <img
           v-for="index of 126"
-          v-show="curFrameIdxBlue === index - 1"
+          v-show="curFrameIdxBlue === index - 1 ||
+            curFrameIdxBlue - 1 === index - 1 ||
+            (curFrameIdxBlue === 0 && index === 126)
+          "
           :key="index"
           class="tree"
           :src="`${$publicPath}tree-selection-frames/blue/blue_${(index-1).toString().padStart(4, '0')}.jpg`"
@@ -84,7 +87,10 @@
       >
         <img
           v-for="index of 131"
-          v-show="curFrameIdxRed === index - 1"
+          v-show="curFrameIdxRed === index - 1 ||
+            curFrameIdxRed - 1 === index - 1 ||
+            (curFrameIdxRed === 0 && index === 131)
+          "
           :key="index"
           class="tree"
           :src="`${$publicPath}tree-selection-frames/red/red_${(index-1).toString().padStart(4, '0')}.jpg`"
@@ -108,7 +114,10 @@
       >
         <img
           v-for="index of 125"
-          v-show="curFrameIdxGreen === index - 1"
+          v-show="curFrameIdxGreen === index - 1 ||
+            curFrameIdxGreen - 1 === index - 1 ||
+            (curFrameIdxGreen === 0 && index === 125)
+          "
           :key="index"
           class="tree"
           :src="`${$publicPath}tree-selection-frames/green/green_${(index + 3).toString().padStart(4, '0')}.jpg`"