From 3e7ece9ccfb3cf43c76f3102009bff0db678e51a Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 19 Sep 2022 23:40:16 +0200
Subject: [PATCH] refactor(nc-gui): overlay transition

---
 .../nc-gui/components/general/Overlay.vue     | 33 ++++++++++++-------
 1 file changed, 22 insertions(+), 11 deletions(-)

diff --git a/packages/nc-gui/components/general/Overlay.vue b/packages/nc-gui/components/general/Overlay.vue
index cebc59432e..1c7dfd8999 100644
--- a/packages/nc-gui/components/general/Overlay.vue
+++ b/packages/nc-gui/components/general/Overlay.vue
@@ -43,16 +43,27 @@ export default {
 
 <template>
   <teleport :disabled="teleportDisabled || (inline && !target)" :to="target || 'body'">
-    <div
-      v-bind="$attrs"
-      :class="[
-        vModel ? 'opacity-100' : 'opacity-0 pointer-events-none',
-        inline ? 'absolute' : 'fixed',
-        transition ? 'transition-opacity duration-200 ease-in-out' : '',
-      ]"
-      class="z-100 top-0 left-0 bottom-0 right-0 bg-gray-700/75"
-    >
-      <slot :is-open="vModel" />
-    </div>
+    <Transition :name="transition ? 'fade' : undefined" mode="out-in">
+      <div
+        v-show="!!vModel"
+        v-bind="$attrs"
+        :class="[inline ? 'absolute' : 'fixed']"
+        class="z-100 top-0 left-0 bottom-0 right-0 bg-gray-700/75"
+      >
+        <slot :is-open="vModel" />
+      </div>
+    </Transition>
   </teleport>
 </template>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s;
+}
+
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>