From 4df171e6f626695d2473cef36ae6c6b117fa318a Mon Sep 17 00:00:00 2001
From: Sirttas <calloch.gael@gmail.com>
Date: Thu, 16 May 2024 12:02:30 +0200
Subject: [PATCH] annimation

---
 src/components/Dropdown.vue | 19 ++++++++++++++++---
 src/components/Modal.vue    |  2 +-
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/components/Dropdown.vue b/src/components/Dropdown.vue
index 061a96b..9bd2b24 100644
--- a/src/components/Dropdown.vue
+++ b/src/components/Dropdown.vue
@@ -17,8 +17,10 @@ useEventListener('keyup', e => {
     <div class="dropdown" :class="{'dropdown-open': isOpen, 'dropdown-close': !isOpen}" v-on-click-outside="() => isOpen = false">
         <button @click="isOpen = !isOpen">
             <slot name="button" />
-            <ChevronDownIcon v-if="!isOpen" class="chevron" />
-            <ChevronUpIcon v-else class="chevron" />
+            <Transition name="flip">
+                <ChevronDownIcon v-if="!isOpen" class="chevron" />
+                <ChevronUpIcon v-else class="chevron" />
+            </Transition>
         </button>
 
         <Transition name="fade">
@@ -41,6 +43,17 @@ useEventListener('keyup', e => {
 }
 
 .fade-enter-active, .fade-leave-active {
-  transition: opacity 100ms ease-out;
+    @apply transition-opacity;
+}
+
+.flip-enter-from, .flip-leave-to {
+  transform: rotate(180deg);
+}
+
+.flip-enter-active {
+  @apply transition-transform;
+}
+.flip-leave-active {
+   display: none; 
 }
 </style>
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
index b6476a1..ace9142 100644
--- a/src/components/Modal.vue
+++ b/src/components/Modal.vue
@@ -54,7 +54,7 @@ useEventListener('keyup', e => {
 }
 
 .fade-enter-active, .fade-leave-active {
-  transition: opacity 100ms ease-out;
+    @apply transition-opacity;
 }
 
 </style>