fix : drawer animation

app/components/malio/drawer/Drawer.vue

@@ -1,25 +1,25 @@
 <template>
   <Teleport to="body">
-    <div
+    <Transition
-      v-if="isOpen"
+      name="drawer"
-      :id="componentId"
+      appear
-      class="fixed inset-0 z-50"
+      @after-leave="isRendered = false"
-      v-bind="attrs"
     >
-      <Transition name="drawer-backdrop">
+      <div
+        v-if="isRendered && isOpen"
+        :id="componentId"
+        class="fixed inset-0 z-50 flex justify-end"
+        v-bind="attrs"
+      >
         <div
-          v-if="isOpen"
           class="absolute inset-0 bg-black/40"
           data-test="backdrop"
           @click="close"
         />
-      </Transition>
 
-      <Transition name="drawer-panel">
         <div
-          v-if="isOpen"
           :class="twMerge(
-            'absolute right-0 top-0 h-full w-full max-w-md bg-white shadow-xl',
+            'relative z-50 flex h-full w-full max-w-md flex-col bg-white shadow-xl',
             drawerClass,
           )"
           role="dialog"
@@ -51,19 +51,18 @@
           </div>
 
           <div
-            class="overflow-y-auto px-5"
+            class="flex-1 overflow-y-auto px-5"
-            style="max-height: calc(100% - 96px)"
           >
             <slot />
           </div>
         </div>
-      </Transition>
+      </div>
-    </div>
+    </Transition>
   </Teleport>
 </template>
 
 <script setup lang="ts">
-import { computed, ref, useAttrs, useId } from 'vue'
+import { computed, ref, useAttrs, useId, watch } from 'vue'
 import { Icon as IconifyIcon } from '@iconify/vue'
 import { twMerge } from 'tailwind-merge'
 
@@ -103,6 +102,12 @@ const isOpen = computed(() =>
   isControlled.value ? props.modelValue! : localValue.value,
 )
 
+const isRendered = ref(isOpen.value)
+
+watch(isOpen, (val) => {
+  if (val) isRendered.value = true
+})
+
 function close() {
   if (!isControlled.value) {
     localValue.value = false
@@ -112,24 +117,23 @@ function close() {
 </script>
 
 <style scoped>
-.drawer-backdrop-enter-active,
+.drawer-enter-active,
-.drawer-backdrop-leave-active {
+.drawer-leave-active {
   transition: opacity 0.2s ease;
 }
 
-.drawer-backdrop-enter-from,
+.drawer-enter-active > div:last-child,
-.drawer-backdrop-leave-to {
+.drawer-leave-active > div:last-child {
+  transition: transform 0.3s ease;
+}
+
+.drawer-enter-from,
+.drawer-leave-to {
   opacity: 0;
 }
 
-.drawer-panel-enter-active,
+.drawer-enter-from > div:last-child,
-.drawer-panel-leave-active {
+.drawer-leave-to > div:last-child {
-  transition: transform 0.2s ease, opacity 0.2s ease;
-}
-
-.drawer-panel-enter-from,
-.drawer-panel-leave-to {
   transform: translateX(100%);
-  opacity: 0;
 }
 </style>