更换数字变动的动画方式

package.json

@@ -16,7 +16,6 @@
     "axios-progress-bar": "^1.2.0",
     "axios-retry": "^3.2.3",
     "custom-cursor.js": "1.3.6",
-    "gsap": "^3.8.0",
     "lodash-es": "^4.17.21",
     "mitt": "^3.0.0",
     "moment": "^2.29.1",

src/features/mark/MarkHeader.vue

@@ -70,29 +70,45 @@
       </div>
     </div>
     <div v-show="store.status.totalCount" class="tw-flex tw-gap-2">
-      <span>
+      <span style="display: inline-flex; height: 16px">
         <span class="header-small-text">已评</span>
-        <span
-          class="highlight-text"
-          :class="markCountChanged && 'markcount-animation'"
-          >{{ personCountAnimated }}</span
-        >
+        <transition-group name="count-animation" tag="span">
+          <span
+            class="highlight-text"
+            style="display: block"
+            :key="store.status.personCount || 0"
+          >
+            {{ store.status.personCount }}
+          </span>
+        </transition-group>
       </span>
       <span v-if="store.setting.topCount">
         <span class="header-small-text">分配</span>
         <span class="highlight-text">{{ store.setting.topCount ?? "-" }}</span>
       </span>
-      <span>
+      <span style="display: inline-flex; height: 16px">
         <span class="header-small-text">未评</span>
-        <span
-          class="highlight-text"
-          :class="markCountChanged && 'markcount-animation'"
-          >{{ todoMarkCountAnimated }}</span
-        >
+        <transition-group name="count-animation" tag="span">
+          <span
+            class="highlight-text"
+            style="display: block"
+            :key="todoCount || 0"
+          >
+            {{ todoCount }}
+          </span>
+        </transition-group>
       </span>
-      <span>
+      <span style="display: inline-flex; height: 16px">
         <span class="header-small-text">进度</span>
-        <span class="highlight-text">{{ progress ?? "-" }}%</span>
+        <transition-group name="count-animation" tag="span">
+          <span
+            class="highlight-text"
+            style="display: block"
+            :key="progress || '-'"
+          >
+            {{ progress }}%
+          </span>
+        </transition-group>
       </span>
     </div>
     <div class="tw-flex tw-place-items-center">
@@ -331,7 +347,7 @@
 
 <script setup lang="ts">
 import { doLogout, updateUISetting } from "@/api/markPage";
-import { watch, watchEffect } from "vue";
+import { watchEffect } from "vue";
 import { store } from "@/store/store";
 import { ModeEnum } from "@/types";
 import MarkChangeProfile from "./MarkChangeProfile.vue";
@@ -339,7 +355,6 @@ import MarkSwitchGroupDialog from "./MarkSwitchGroupDialog.vue";
 import MarkProblemDialog from "./MarkProblemDialog.vue";
 import { isNumber } from "lodash";
 import { Modal } from "ant-design-vue";
-import gsap from "gsap";
 
 let modeName = $computed(() =>
   store.setting.mode === ModeEnum.TRACK ? "轨迹模式" : "普通模式"
@@ -366,7 +381,7 @@ async function toggleSettingMode() {
 
 let progress = $computed(() => {
   const { totalCount, markedCount } = store.status;
-  if (totalCount <= 0) return 0;
+  if (typeof totalCount !== "number" || totalCount === 0) return 0;
   let p = markedCount / totalCount;
   if (p < 0.01 && markedCount >= 1) p = 0.01;
   p = Math.floor(p * 100);
@@ -420,34 +435,10 @@ watchEffect(() => {
   }
 });
 
-let personCountAnimated = $computed(() => {
-  if (store.status.personCountTweenedNumber === undefined) return "-";
-  return Number(store.status.personCountTweenedNumber).toFixed(0);
-});
-let todoMarkCountAnimated = $computed(() => {
-  if (store.status.totalCount === undefined) return "-";
-  return Number(store.status.todoMarkCountTweenedNumber).toFixed(0);
-});
-let markCountChanged = $ref(false);
-watch(
-  () => [
-    store.status.personCount,
-    store.status.totalCount,
-    store.status.markedCount,
-  ],
-  ([personCount, totalCount, markedCount]) => {
-    if (store.status.personCountTweenedNumber === undefined) {
-      store.status.personCountTweenedNumber = 0;
-      store.status.todoMarkCountTweenedNumber = 0;
-    }
-    markCountChanged = true;
-    setTimeout(() => (markCountChanged = false), 3000);
-    gsap.to(store.status, {
-      duration: 1.5,
-      personCountTweenedNumber: personCount,
-      todoMarkCountTweenedNumber: totalCount - markedCount,
-    });
-  }
+let todoCount = $computed(() =>
+  typeof store.status.totalCount === "number"
+    ? store.status.totalCount - store.status.markedCount
+    : "-"
 );
 </script>
 
@@ -525,15 +516,14 @@ watch(
   clip-path: polygon(0 0, 100% 0, 50% 100%);
   margin-left: 4px;
 }
-.markcount-animation {
-  animation: change-color 3s ease-in-out;
+
+.count-animation-enter-active,
+.count-animation-leave-active {
+  transition: all 1s ease;
 }
-@keyframes change-color {
-  0% {
-    color: red;
-  }
-  100% {
-    color: white;
-  }
+.count-animation-enter-from,
+.count-animation-leave-to {
+  opacity: 0;
+  transform: translateY(30px);
 }
 </style>

yarn.lock

@@ -1012,11 +1012,6 @@ graceful-fs@^4.1.6, graceful-fs@^4.2.0:
   resolved "https://registry.nlark.com/graceful-fs/download/graceful-fs-4.2.8.tgz?cache=0&sync_timestamp=1628194078324&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fgraceful-fs%2Fdownload%2Fgraceful-fs-4.2.8.tgz#e412b8d33f5e006593cbd3cee6df9f2cebbe802a"
   integrity sha1-5BK40z9eAGWTy9PO5t+fLOu+gCo=
 
-gsap@^3.8.0:
-  version "3.8.0"
-  resolved "https://registry.npmmirror.com/gsap/download/gsap-3.8.0.tgz?cache=0&sync_timestamp=1632902708570&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fgsap%2Fdownload%2Fgsap-3.8.0.tgz#a404dd6ebbaabc92605539aea9d98e3098688064"
-  integrity sha1-pATdbruqvJJgVTmuqdmOMJhogGQ=
-
 has-flag@^3.0.0:
   version "3.0.0"
   resolved "https://registry.nlark.com/has-flag/download/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"