优化动画

src/features/mark/MarkBoardTrack.vue

@@ -15,7 +15,7 @@
           />
           总分
         </div>
-        <div class="total-score tw-ml-5 tw-font-bold">
+        <div class="total-score tw-ml-5 tw-font-bold" style="height: 50px">
           <transition-group name="score-number-animation" tag="span">
             <span
               :key="store.currentTask?.markResult.markerScore || 0"
@@ -107,16 +107,19 @@
                 question.subNumber
               }}
             </div>
-            <transition-group name="score-number-animation" tag="span">
-              <span
-                :key="store.currentTask.markResult.scoreList[index] || 0"
-                class="tw-font-medium tw-text-2xl score tw-inline-block"
-              >
-                <!-- 特殊的空格符号 -->
-                <!-- eslint-disable-next-line no-irregular-whitespace -->
-                {{ store.currentTask.markResult.scoreList[index] ?? " " }}
-              </span>
-            </transition-group>
+            <!-- 设置高度 避免动画跳动 -->
+            <div style="height: 32px">
+              <transition-group name="score-number-animation" tag="span">
+                <span
+                  :key="store.currentTask.markResult.scoreList[index] || 0"
+                  class="tw-font-medium tw-text-2xl score tw-inline-block"
+                >
+                  <!-- 特殊的空格符号 -->
+                  <!-- eslint-disable-next-line no-irregular-whitespace -->
+                  {{ store.currentTask.markResult.scoreList[index] ?? " " }}
+                </span>
+              </transition-group>
+            </div>
           </div>
         </template>
       </div>

src/styles/global.css

@@ -30,7 +30,7 @@ body {
 
 .score-number-animation-enter-active,
 .score-number-animation-leave-active {
-  transition: all 0.4s ease-in-out 0.4s;
+  transition: all 0.2s ease-in-out 0.2s;
   transform: scale(1.1);
 }
 .score-number-animation-enter-from,
@@ -38,7 +38,7 @@ body {
   opacity: 0;
   /* transform: translateX(40px) scale(0.3); */
   transform: scale(0.3);
-  transition: all 0.4s ease-in-out;
+  transition: all 0.2s ease-in-out;
 }
 
 /* override ant-design */