fix(ui): transition on modal

src/components/Modal.vue

@@ -1,28 +1,38 @@
 <template>
-  <div
-    class="
-      fixed
-      top-0
-      left-0
-      w-screen
-      h-screen
-      z-20
-      flex
-      justify-center
-      items-center
-    "
-    style="background: rgba(0, 0, 0, 0.2); backdrop-filter: blur(4px)"
-    @click="$emit('closemodal')"
-    v-if="openModal"
-  >
+  <Transition>
     <div
-      class="bg-white rounded-lg shadow-2xl w-form border overflow-hidden"
-      v-bind="$attrs"
-      @click.stop
+      class="
+        fixed
+        top-0
+        left-0
+        w-screen
+        h-screen
+        z-20
+        flex
+        justify-center
+        items-center
+      "
+      style="background: rgba(0, 0, 0, 0.2); backdrop-filter: blur(4px)"
+      @click="$emit('closemodal')"
+      v-if="openModal"
     >
-      <slot></slot>
+      <div
+        class="
+          bg-white
+          rounded-lg
+          shadow-2xl
+          w-form
+          border
+          overflow-hidden
+          inner
+        "
+        v-bind="$attrs"
+        @click.stop
+      >
+        <slot></slot>
+      </div>
     </div>
-  </div>
+  </Transition>
 </template>
 
 <script lang="ts">
@@ -60,3 +70,28 @@ export default defineComponent({
   },
 });
 </script>
+<style scoped>
+.v-enter-active,
+.v-leave-active {
+  transition: all 100ms ease-out;
+}
+
+.inner {
+  transition: all 150ms ease-out;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+
+.v-enter-from .inner,
+.v-leave-to .inner {
+  transform: translateY(-50px);
+}
+
+.v-enter-to .inner,
+.v-leave-from .inner {
+  transform: translateY(0px);
+}
+</style>