【需求 21133】 ux: 切换表情加入过度

src/components/common/UploadEmojiIcon/index.vue

@@ -11,6 +11,7 @@ const emit = defineEmits<{
 type EmojiTab = 'face' | 'yaya'
 
 const activeTab = ref<EmojiTab>('face')
+const transitionName = ref('emoji-slide-left')
 
 const emojiTabs: Array<{
   key: EmojiTab
@@ -32,6 +33,16 @@ const emojiTabs: Array<{
 const currentEmojiList = computed(() => {
   return emojiTabs.find((tab) => tab.key === activeTab.value)?.list ?? []
 })
+
+const switchTab = (nextTab: EmojiTab) => {
+  if (nextTab === activeTab.value) return
+
+  const currentIndex = emojiTabs.findIndex((tab) => tab.key === activeTab.value)
+  const nextIndex = emojiTabs.findIndex((tab) => tab.key === nextTab)
+
+  transitionName.value = nextIndex > currentIndex ? 'emoji-slide-left' : 'emoji-slide-right'
+  activeTab.value = nextTab
+}
 </script>
 
 <template>
@@ -53,30 +64,32 @@ const currentEmojiList = computed(() => {
             type="button"
             class="emoji-tab"
             :class="{ 'emoji-tab--active': activeTab === tab.key }"
-            @click="activeTab = tab.key"
+            @click="switchTab(tab.key)"
           >
             {{ tab.label }}
           </button>
         </div>
 
         <el-scrollbar class="emoji-scrollbar">
-          <div class="emoji-grid">
-            <button
-              v-for="item in currentEmojiList"
-              :key="item.name"
-              type="button"
-              class="emoji-item"
-              :title="item.name"
-              @click="emit('selectEmoji', item as IEmoji)"
-            >
-              <img
-                :src="item.url"
-                :alt="item.name"
-                class="h-6 w-6 object-contain"
-                :class="{ 'h-8 w-8': item.group === 'yaya' }"
-              />
-            </button>
-          </div>
+          <transition :name="transitionName" mode="out-in">
+            <div :key="activeTab" class="emoji-grid">
+              <button
+                v-for="item in currentEmojiList"
+                :key="item.name"
+                type="button"
+                class="emoji-item"
+                :title="item.name"
+                @click="emit('selectEmoji', item as IEmoji)"
+              >
+                <img
+                  :src="item.url"
+                  :alt="item.name"
+                  class="h-6 w-6 object-contain"
+                  :class="{ 'h-8 w-8': item.group === 'yaya' }"
+                />
+              </button>
+            </div>
+          </transition>
         </el-scrollbar>
       </div>
     </el-popover>
@@ -138,6 +151,35 @@ const currentEmojiList = computed(() => {
   padding: 2px 4px 10px;
 }
 
+.emoji-slide-left-enter-active,
+.emoji-slide-left-leave-active,
+.emoji-slide-right-enter-active,
+.emoji-slide-right-leave-active {
+  transition:
+    opacity 0.22s ease,
+    transform 0.22s ease;
+}
+
+.emoji-slide-left-enter-from,
+.emoji-slide-right-leave-to {
+  opacity: 0;
+  transform: translateX(18px);
+}
+
+.emoji-slide-left-leave-to,
+.emoji-slide-right-enter-from {
+  opacity: 0;
+  transform: translateX(-18px);
+}
+
+.emoji-slide-left-enter-to,
+.emoji-slide-left-leave-from,
+.emoji-slide-right-enter-to,
+.emoji-slide-right-leave-from {
+  opacity: 1;
+  transform: translateX(0);
+}
+
 .emoji-item {
   display: flex;
   align-items: center;