annimation

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>

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>