From 150e5acf6d057c1060e0320aefe5798026c7a4b7 Mon Sep 17 00:00:00 2001
From: kandrusyak <kandrusyak@t1-consulting.ru>
Date: Tue, 6 Dec 2022 14:42:42 +0300
Subject: [PATCH] modal animation

---
 src/components/base/BaseModal.vue | 24 +++++++++++++++++-------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/components/base/BaseModal.vue b/src/components/base/BaseModal.vue
index 698273c..d58439f 100644
--- a/src/components/base/BaseModal.vue
+++ b/src/components/base/BaseModal.vue
@@ -1,11 +1,12 @@
 <template lang="pug">
-  teleport(:to="appContainer", v-if="value")
-    .base-overlay(:class="{'base-overlay-bg': !hideOverlay}", :style="styleOverlay")
-      .base-content(v-click-outside="clickOutside", :style="styleContent")
-        .base-header
-          .header-title.text {{ title }}
-          .icon-cancel.text-sm(@click="value = false", v-if="!showIcon")
-        slot
+  teleport(:to="appContainer")
+    transition
+      .base-overlay(:class="{'base-overlay-bg': !hideOverlay}", :style="styleOverlay", v-if="value")
+        .base-content(v-click-outside="clickOutside", :style="styleContent")
+          .base-header
+            .header-title.text {{ title }}
+            .icon-cancel.text-sm(@click="value = false", v-if="!showIcon")
+          slot
 
 </template>
 
@@ -77,4 +78,13 @@ export default {
   margin-right: -11px
   cursor: pointer
   color: var(--font-grey-color)
+
+.v-enter-active,
+.v-leave-active
+  transition: opacity 0.3s ease-in-out
+
+
+.v-enter-from,
+.v-leave-to
+  opacity: 0
 </style>