拼图游戏结束后庆祝效果修改

src/views/JigsawGame.vue

@@ -91,6 +91,25 @@
       class="complete-tip"
       :src="require(`@/assets/audios/complete-tip.mp3`)"
     />
+    <Teleport
+      to="body"
+    >
+      <transition
+        name="fade-in-out"
+      >
+        <div
+          v-if="isCelebrating"
+          class="celebrate"
+        >
+          <img
+            class=""
+            src="@/assets/images/celebrate.gif"
+            alt=""
+            draggable="false"
+          >
+        </div>
+      </transition>
+    </Teleport>
   </div>
 </template>
 
@@ -297,8 +316,8 @@ export default {
           this.isCelebrating = true
           setTimeout(() => {
             this.isCelebrating = false
-          }, 1000)
-        }, 1000)
+          }, 4000)
+        }, 0)
       }
     },
     onClickReplay() {
@@ -333,19 +352,19 @@ export default {
   justify-content: center;
   align-items: center;
   &.celebrating{
-    animation: flash 0.8s forwards;
-  }
-  @keyframes flash {
-    0% {
-      filter: brightness(1)
-    }
-    50% {
-      filter: brightness(1.1) saturate(1.2)
-    }
-    100% {
-      filter: brightness(1)
-    }
+    // animation: flash 0.8s forwards;
   }
+  // @keyframes flash {
+  //   0% {
+  //     filter: brightness(1)
+  //   }
+  //   50% {
+  //     filter: brightness(1.1) saturate(1.2)
+  //   }
+  //   100% {
+  //     filter: brightness(1)
+  //   }
+  // }
   >.left-wrapper {
     width: calc(950 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
     height: calc(628 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
@@ -428,4 +447,24 @@ export default {
     }
   }
 }
+</style>
+
+<style lang="less">
+.celebrate{
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  >img{
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+}
 </style>