分数回退动画

src/features/mark/MarkDrawTrack.vue

@@ -1,19 +1,22 @@
 <template>
-  <template v-for="(track, index) in trackList" :key="index">
-    <div
-      v-if="store.isTrackMode"
-      class="score-container"
-      :class="[focusedTrack(track) && 'score-animation']"
-      :style="computeTopAndLeft(track)"
-    >
-      <span
-        class="tw-m-auto"
-        :id="'a' + track.mainNumber + track.subNumber + track.offsetY"
+  <transition-group name="track-score" tag="div">
+    <template v-for="(track, index) in trackList" :key="index">
+      <div
+        v-if="store.isTrackMode"
+        class="score-container"
+        :class="[focusedTrack(track) && 'score-animation']"
+        :style="computeTopAndLeft(track)"
+        :key="'key' + track.mainNumber + track.subNumber + track.offsetY"
       >
-        {{ track.score }}
-      </span>
-    </div>
-  </template>
+        <span
+          class="tw-m-auto"
+          :id="'a' + track.mainNumber + track.subNumber + track.offsetY"
+        >
+          {{ track.score }}
+        </span>
+      </div>
+    </template>
+  </transition-group>
   <template v-for="(tag, index) in specialTagList" :key="index">
     <div class="score-container" :style="computeTopAndLeft(tag)">
       <span class="tw-m-auto">
@@ -114,4 +117,15 @@ watch(
     margin-left: -80px;
   }
 }
+.track-score-enter-active {
+  transition: opacity 0.3s ease;
+}
+.track-score-leave-active {
+  transition: opacity 0.6s ease;
+}
+
+.track-score-enter-from,
+.track-score-leave-to {
+  opacity: 0;
+}
 </style>