From 6e2a92b96ec034c42d6db459b8ee7fc0d6da1476 Mon Sep 17 00:00:00 2001
From: Matt Isenhower <matt@isenhower.com>
Date: Tue, 8 Aug 2017 10:05:58 -0700
Subject: [PATCH] Add some transitions

---
 src/css/main.scss           |  4 ++++
 src/js/components/Modal.vue | 33 ++++++++++++++++++++++++++++-----
 2 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/src/css/main.scss b/src/css/main.scss
index 3bbac9a..8bdabb9 100644
--- a/src/css/main.scss
+++ b/src/css/main.scss
@@ -9,6 +9,10 @@ html {
     @extend .bg-squids;
 }
 
+body #main {
+    transition: filter 0.15s ease;
+}
+
 body.has-modal #main {
     filter: blur(4px);
 }
diff --git a/src/js/components/Modal.vue b/src/js/components/Modal.vue
index 79356ba..97f54a2 100644
--- a/src/js/components/Modal.vue
+++ b/src/js/components/Modal.vue
@@ -1,11 +1,34 @@
 <template>
-    <div class="modal is-active" v-portal>
-        <div class="modal-background" @click="$emit('close')"></div>
-        <slot />
-        <button class="modal-close is-large" @click="$emit('close')"></button>
-    </div>
+    <transition name="modal">
+        <div class="modal is-active" v-portal>
+            <div class="modal-background" @click="$emit('close')"></div>
+            <div class="modal-inner-transition">
+                <slot></slot>
+            </div>
+            <button class="modal-close is-large" @click="$emit('close')"></button>
+        </div>
+    </transition>
 </template>
 
+<style>
+.modal-enter-active, .modal-leave-active {
+    transition: all 0.15s ease;
+}
+
+.modal-enter, .modal-leave-active {
+    opacity: 0;
+}
+
+.modal-enter-active .modal-inner-transition, .modal-leave-active .modal-inner-transition {
+    transition: all 0.15s ease;
+}
+
+.modal-enter .modal-inner-transition, .modal-leave-active .modal-inner-transition {
+    -webkit-transform: scale(0.98);
+    transform: scale(0.98);
+}
+</style>
+
 <script>
 const openModals = [];