From c7446fd49fd5e2ecb0d5aef7d2aecacc6851c9af Mon Sep 17 00:00:00 2001
From: kPherox <admin@mail.kr-kp.com>
Date: Wed, 24 Apr 2019 00:04:29 +0900
Subject: [PATCH] Add fade animation to overlay comp

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

diff --git a/src/components/globals/BaseOverlay.vue b/src/components/globals/BaseOverlay.vue
index bae54c1d..8fee3e70 100644
--- a/src/components/globals/BaseOverlay.vue
+++ b/src/components/globals/BaseOverlay.vue
@@ -1,11 +1,13 @@
 <template>
-  <div class="overlay">
-    <button type="button" class="close-button" @click="closeOverlay">x</button>
-    <h1>{{ title }}</h1>
-    <div class="overlay-inner">
-      <slot/>
+  <transition name="fade">
+    <div class="overlay">
+      <button type="button" class="close-button" @click="closeOverlay">x</button>
+      <h1>{{ title }}</h1>
+      <div class="overlay-inner">
+        <slot/>
+      </div>
     </div>
-  </div>
+  </transition>
 </template>
 
 <script lang="ts">
@@ -25,13 +27,21 @@ export default class BaseOverlay extends Vue {
 </script>
 
 <style scoped lang="postcss">
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
 .overlay {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
-  background-color: var(--bg-color);
   width: 100vw;
   height: 100vh;
+  background-color: var(--bg-color);
 }
 .overlay-inner {
   margin: 1em;