打分时，分数改变时动画过渡

src/features/mark/MarkBoardKeyBoard.vue

@@ -20,11 +20,7 @@
       </a-dropdown>
     </div>
     <div
-      class="
-        tw-flex tw-rounded tw-justify-between tw-p-2 tw-pl-5
-        top-container
-        tw-mb-4
-      "
+      class="tw-flex tw-rounded tw-justify-between tw-p-2 tw-pl-5 top-container tw-mb-4"
     >
       <div class="tw-flex tw-flex-col">
         <div class="tw-flex tw-items-center tw-gap-2">
@@ -35,7 +31,13 @@
           总分
         </div>
         <div class="total-score tw-ml-5 tw-font-bold">
-          {{ store.currentTask?.markResult.markerScore }}
+          <transition-group name="score-number-animation" tag="span">
+            <span
+              :key="store.currentTask?.markResult.markerScore || 0"
+              class="tw-inline-block"
+              >{{ store.currentTask?.markResult.markerScore }}</span
+            >
+          </transition-group>
         </div>
       </div>
 
@@ -90,10 +92,7 @@
       >
         <div
           :id="'bq-' + question.mainNumber + '-' + question.subNumber"
-          class="
-            question
-            tw-rounded tw-p-1 tw-mb-2 tw-cursor-pointer tw-relative
-          "
+          class="question tw-rounded tw-p-1 tw-mb-2 tw-cursor-pointer tw-relative"
           :class="isCurrentQuestion(question) && 'current-question'"
           @click="
             () => {

src/features/mark/MarkBoardMouse.vue

@@ -20,11 +20,7 @@
       </a-dropdown>
     </div>
     <div
-      class="
-        tw-flex tw-rounded tw-justify-between tw-p-2 tw-pl-5
-        top-container
-        tw-mb-4
-      "
+      class="tw-flex tw-rounded tw-justify-between tw-p-2 tw-pl-5 top-container tw-mb-4"
     >
       <div class="tw-flex tw-flex-col">
         <div class="tw-flex tw-items-center tw-gap-2">
@@ -35,7 +31,13 @@
           总分
         </div>
         <div class="total-score tw-ml-5 tw-font-bold">
-          {{ store.currentTask?.markResult.markerScore }}
+          <transition-group name="score-number-animation" tag="span">
+            <span
+              :key="store.currentTask?.markResult.markerScore || 0"
+              class="tw-inline-block"
+              >{{ store.currentTask?.markResult.markerScore }}</span
+            >
+          </transition-group>
         </div>
       </div>
 

src/features/mark/MarkBoardTrack.vue

@@ -5,11 +5,7 @@
     :class="[store.isScoreBoardCollapsed ? 'hide' : 'show']"
   >
     <div
-      class="
-        tw-flex tw-rounded tw-justify-between tw-p-2 tw-pl-5
-        top-container
-        tw-mb-4
-      "
+      class="tw-flex tw-rounded tw-justify-between tw-p-2 tw-pl-5 top-container tw-mb-4"
     >
       <div class="tw-flex tw-flex-col">
         <div class="tw-flex tw-items-center tw-gap-2">
@@ -20,7 +16,13 @@
           总分
         </div>
         <div class="total-score tw-ml-5 tw-font-bold">
-          {{ store.currentTask?.markResult.markerScore }}
+          <transition-group name="score-number-animation" tag="span">
+            <span
+              :key="store.currentTask?.markResult.markerScore || 0"
+              class="tw-inline-block"
+              >{{ store.currentTask?.markResult.markerScore }}</span
+            >
+          </transition-group>
         </div>
       </div>
 
@@ -78,14 +80,7 @@
     >
       <div
         v-if="store.currentTask && store.currentTask.questionList"
-        class="
-          tw-flex
-          tw-gap-2
-          tw-flex-wrap
-          tw-justify-between
-          tw-overflow-auto
-          tw-content-start
-        "
+        class="tw-flex tw-gap-2 tw-flex-wrap tw-justify-between tw-overflow-auto tw-content-start"
         style="min-height: 20% !important; max-height: 80% !important"
         :style="{ height: `${topPercent}%` }"
       >
@@ -107,11 +102,16 @@
                 question.subNumber
               }}
             </div>
-            <div class="tw-font-medium tw-text-2xl score">
-              <!-- 特殊的空格符号 -->
-              <!-- eslint-disable-next-line no-irregular-whitespace -->
-              {{ store.currentTask.markResult.scoreList[index] ?? " " }}
-            </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>
         </template>
       </div>

src/styles/global.css

@@ -28,6 +28,19 @@ body {
   font-size: var(--app-title-font-size);
 }
 
+.score-number-animation-enter-active,
+.score-number-animation-leave-active {
+  transition: all 0.4s ease-in-out 0.4s;
+  transform: scale(1.1);
+}
+.score-number-animation-enter-from,
+.score-number-animation-leave-to {
+  opacity: 0;
+  /* transform: translateX(40px) scale(0.3); */
+  transform: scale(0.3);
+  transition: all 0.4s ease-in-out;
+}
+
 /* override ant-design */
 .ant-message {
   z-index: 6001 !important;