add animation to the BaseDialog

src/components/ui/BaseDialog.vue

@@ -1,6 +1,7 @@
 <template>
   <teleport to="body">
     <div v-if="show" @click="tryClose" class="backdrop"></div>
+    <transition name="dialog">
       <dialog open v-if="show">
         <header>
           <slot name="header">
@@ -16,6 +17,7 @@
           </slot>
         </menu>
       </dialog>
+    </transition>
   </teleport>
 </template>
 
@@ -24,17 +26,17 @@ export default {
   props: {
     show: {
       type: Boolean,
-      required: true,
+      required: true
     },
     title: {
       type: String,
-      required: false,
+      required: false
     },
     fixed: {
       type: Boolean,
       required: false,
-      default: false,
+      default: false
-    },
+    }
   },
   emits: ['close'],
   methods: {
@@ -43,8 +45,8 @@ export default {
         return;
       }
       this.$emit('close');
-    },
+    }
-  },
+  }
 };
 </script>
 
@@ -96,6 +98,26 @@ menu {
   margin: 0;
 }
 
+.dialog-enter-from,
+.dialog-leave-to {
+  opacity: 0;
+  transform: scale(0.8);
+}
+
+.dialog-enter-active {
+  transition: all 0.2s ease-out;
+}
+
+.dialog-leave-active {
+  transition: all 0.2s ease-in;
+}
+
+.dialog-enter-to,
+.dialog-leave-from {
+  opacity: 1;
+  transform: scale(1);
+}
+
 @media (min-width: 768px) {
   dialog {
     left: calc(50% - 20rem);