【需求 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,14 +64,15 @@ 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">
+          <transition :name="transitionName" mode="out-in">
+            <div :key="activeTab" class="emoji-grid">
               <button
                 v-for="item in currentEmojiList"
                 :key="item.name"
@@ -77,6 +89,7 @@ const currentEmojiList = computed(() => {
                 />
               </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;