Add some transitions

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);
 }

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 = [];