From 48222e6e99947e696cb903724ee9252992ce7f33 Mon Sep 17 00:00:00 2001
From: thomasRalee <thomas.leera@gmail.com>
Date: Tue, 9 Jan 2024 21:51:05 +0800
Subject: [PATCH] chore: layer modal wrapper remove animation

---
 layer/components/ModalWrapper.vue | 48 +++++++++++--------------------
 1 file changed, 16 insertions(+), 32 deletions(-)

diff --git a/layer/components/ModalWrapper.vue b/layer/components/ModalWrapper.vue
index 4bbc69e4..0ed37e48 100644
--- a/layer/components/ModalWrapper.vue
+++ b/layer/components/ModalWrapper.vue
@@ -40,9 +40,7 @@ function onModalClose() {
   closeModal()
 }
 
-onKeyStroke('Escape', () => {
-  closeModal()
-})
+onKeyStroke('Escape', closeModal)
 
 onClickOutside(
   modalRef,
@@ -61,39 +59,25 @@ export default {
 </script>
 
 <template>
-  <Transition name="modal" appear>
-    <div
-      class="fixed inset-0 z-50 h-full w-full duration-300 ease-in"
-      :class="wrapperClass"
-    >
-      <div class="flex items-center justify-center h-full">
+  <div
+    class="fixed inset-0 z-50 h-full w-full duration-300 ease-in"
+    :class="wrapperClass"
+  >
+    <div class="flex items-center justify-center h-full">
+      <div
+        ref="modalRef"
+        class="modal-container overflow-y-hidden"
+        :class="$attrs.class"
+      >
         <div
-          ref="modalRef"
-          class="modal-container overflow-y-hidden"
-          :class="$attrs.class"
+          class="max-h-screen sm:max-h-[90vh] overflow-y-auto"
+          :class="containerClass"
         >
-          <div
-            class="max-h-screen sm:max-h-[90vh] overflow-y-auto"
-            :class="containerClass"
-          >
-            <div class="modal-content">
-              <slot :close="onModalClose" v-bind="{ isLoading }" />
-            </div>
+          <div class="modal-content">
+            <slot :close="onModalClose" v-bind="{ isLoading }" />
           </div>
         </div>
       </div>
     </div>
-  </Transition>
+  </div>
 </template>
-
-<style scoped>
-.modal-enter-from,
-.modal-leave-to {
-  @apply opacity-0;
-}
-
-.modal-leave-active .modal-container {
-  transition: 300ms cubic-bezier(0.4, 0, 1, 1);
-  transform: scale(0.9);
-}
-</style>