From d0d3c4015105e51e0daefe1bbcf28bf573ee70d5 Mon Sep 17 00:00:00 2001
From: Andreas Zweili <andreas@2li.ch>
Date: Wed, 28 Jul 2021 20:57:45 +0200
Subject: [PATCH] add animation to the BaseDialog

---
 src/components/ui/BaseDialog.vue | 66 +++++++++++++++++++++-----------
 1 file changed, 44 insertions(+), 22 deletions(-)

diff --git a/src/components/ui/BaseDialog.vue b/src/components/ui/BaseDialog.vue
index 95fc79c..b45ff5f 100644
--- a/src/components/ui/BaseDialog.vue
+++ b/src/components/ui/BaseDialog.vue
@@ -1,21 +1,23 @@
 <template>
   <teleport to="body">
     <div v-if="show" @click="tryClose" class="backdrop"></div>
-    <dialog open v-if="show">
-      <header>
-        <slot name="header">
-          <h2>{{ title }}</h2>
-        </slot>
-      </header>
-      <section>
-        <slot></slot>
-      </section>
-      <menu v-if="!fixed">
-        <slot name="actions">
-          <base-button @click="tryClose">Close</base-button>
-        </slot>
-      </menu>
-    </dialog>
+    <transition name="dialog">
+      <dialog open v-if="show">
+        <header>
+          <slot name="header">
+            <h2>{{ title }}</h2>
+          </slot>
+        </header>
+        <section>
+          <slot></slot>
+        </section>
+        <menu v-if="!fixed">
+          <slot name="actions">
+            <base-button @click="tryClose">Close</base-button>
+          </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,10 +98,30 @@ 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);
     width: 40rem;
   }
 }
-</style>
\ No newline at end of file
+</style>