From 4a96d2b45aa389730196f3a43223cf7504a830ea Mon Sep 17 00:00:00 2001
From: Alex <49969959+alexzhang1030@users.noreply.github.com>
Date: Wed, 30 Nov 2022 14:21:11 +0800
Subject: [PATCH] feat: add number animate when posts's status has changed
 (#244)

---
 components/common/AnimateNumber.vue      | 19 +++++++++++++++++++
 components/status/StatusActionButton.vue |  7 ++++++-
 2 files changed, 25 insertions(+), 1 deletion(-)
 create mode 100644 components/common/AnimateNumber.vue

diff --git a/components/common/AnimateNumber.vue b/components/common/AnimateNumber.vue
new file mode 100644
index 00000000..3d5cffef
--- /dev/null
+++ b/components/common/AnimateNumber.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+defineProps<{
+  increased: boolean
+}>()
+</script>
+
+<template>
+  <div overflow-hidden h="1.25rem">
+    <div
+      transition="duration-300 transform"
+      :style="{
+        transform: increased ? 'translateY(-50%)' : 'translateY(0%)',
+      }"
+    >
+      <slot />
+      <slot name="next" />
+    </div>
+  </div>
+</template>
diff --git a/components/status/StatusActionButton.vue b/components/status/StatusActionButton.vue
index 8e09048f..3c241982 100644
--- a/components/status/StatusActionButton.vue
+++ b/components/status/StatusActionButton.vue
@@ -55,6 +55,11 @@ useCommand({
       </div>
     </CommonTooltip>
 
-    <span v-if="text" :class="active ? [color] : 'text-secondary-light'" text-sm>{{ text }}</span>
+    <CommonAnimateNumber :increased="active">
+      <span display-block text-secondary-light text-sm>{{ text }}</span>
+      <template #next>
+        <span display-block :class="[color]" text-sm>{{ text }}</span>
+      </template>
+    </CommonAnimateNumber>
   </component>
 </template>