fix(ui): transition on modal

src/components/Modal.vue

@@ -1,4 +1,5 @@
 <template>
+  <Transition>
     <div
       class="
         fixed
@@ -16,13 +17,22 @@
       v-if="openModal"
     >
       <div
-      class="bg-white rounded-lg shadow-2xl w-form border overflow-hidden"
+        class="
+          bg-white
+          rounded-lg
+          shadow-2xl
+          w-form
+          border
+          overflow-hidden
+          inner
+        "
         v-bind="$attrs"
         @click.stop
       >
         <slot></slot>
       </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>