From 96f432da4b4e7fba185bf2c642d33380da7aea8d Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Sat, 5 Oct 2024 02:14:00 +0800
Subject: [PATCH] refactor: extract dropdown animation to
 `transitionAndTransitionGroup.scss`

---
 src/components/Select.vue                    | 11 +----------
 src/styles/transitionAndTransitionGroup.scss |  9 +++++++++
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/Select.vue b/src/components/Select.vue
index 7d0fd38b..577557d8 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -83,7 +83,7 @@ function onMouseEnter() {
         transition="all duration-300"
       />
     </div>
-    <Transition>
+    <Transition name="dropdown">
       <div
         v-if="showOptions"
         style="backdrop-filter: var(--bew-filter-glass-1)"
@@ -111,13 +111,4 @@ function onMouseEnter() {
 </template>
 
 <style lang="scss" scoped>
-.v-enter-active,
-.v-leave-active {
-  --uno: "transition-all duration-340 transform-gpu";
-}
-
-.v-enter-from,
-.v-leave-to {
-  --uno: "opacity-0 transform-gpu scale-95 -translate-y-4 filter blur-sm";
-}
 </style>
diff --git a/src/styles/transitionAndTransitionGroup.scss b/src/styles/transitionAndTransitionGroup.scss
index 7628fa4b..8d6f9304 100644
--- a/src/styles/transitionAndTransitionGroup.scss
+++ b/src/styles/transitionAndTransitionGroup.scss
@@ -39,3 +39,12 @@
 .modal-leave-to {
   --uno: "opacity-0 scale-105";
 }
+
+.dropdown-enter-active,
+.dropdown-leave-active {
+  --uno: "transition-all duration-300 transform-gpu";
+}
+.dropdown-enter-from,
+.dropdown-leave-to {
+  --uno: "opacity-0 transform-gpu scale-95 -translate-y-4 filter blur-sm";
+}