feat: improved modal animations

client/js/components/anchor.vue

@@ -1,16 +1,19 @@
 <template lang="pug">
-  .modal(v-bind:class='{ "is-active": isShown }')
+  transition(:duration="400")
-    .modal-background
+    .modal(v-show='isShown', v-cloak)
-    .modal-container
+      transition(name='modal-background')
-      .modal-content
+        .modal-background(v-show='isShown')
-        header.is-blue
+      .modal-container
-          span Copy link to this section
+        transition(name='modal-content')
-        section
+          .modal-content(v-show='isShown')
-          p.control.is-fullwidth
+            header.is-blue
-            input.input(type='text', ref='anchorURLinput', v-model='anchorURL')
+              span Copy link to this section
-        footer
+            section
-          a.button.is-grey.is-outlined(v-on:click='cancel') Discard
+              p.control.is-fullwidth
-          a.button.is-blue(v-clipboard='anchorURL', @success="clipboardSuccess", @error="clipboardError") Copy to Clipboard
+                input.input(type='text', ref='anchorURLinput', v-model='anchorURL')
+            footer
+              a.button.is-grey.is-outlined(v-on:click='cancel') Discard
+              a.button.is-blue(v-clipboard='anchorURL', @success="clipboardSuccess", @error="clipboardError") Copy to Clipboard
 </template>
 
 <script>

client/js/components/modal-create-page.vue

@@ -1,17 +1,20 @@
 <template lang="pug">
-  .modal(v-bind:class='{ "is-active": isShown }')
+  transition(:duration="400")
-    .modal-background
+    .modal(v-show='isShown', v-cloak)
-    .modal-container
+      transition(name='modal-background')
-      .modal-content
+        .modal-background(v-show='isShown')
-        header.is-light-blue Create New Document
+      .modal-container
-        section
+        transition(name='modal-content')
-          label.label Enter the new document path:
+          .modal-content(v-show='isShown')
-          p.control.is-fullwidth(v-bind:class='{ "is-loading": isLoading }')
+            header.is-light-blue Create New Document
-            input.input(type='text', placeholder='page-name', v-model='userPath', ref='createPageInput', @keyup.enter='create', @keyup.esc='cancel')
+            section
-            span.help.is-red(v-show='isInvalid') This document path is invalid!
+              label.label Enter the new document path:
-        footer
+              p.control.is-fullwidth(v-bind:class='{ "is-loading": isLoading }')
-          a.button.is-grey.is-outlined(v-on:click='cancel') Discard
+                input.input(type='text', placeholder='page-name', v-model='userPath', ref='createPageInput', @keyup.enter='create', @keyup.esc='cancel')
-          a.button.is-light-blue(v-on:click='create') Create
+                span.help.is-red(v-show='isInvalid') This document path is invalid!
+            footer
+              a.button.is-grey.is-outlined(v-on:click='cancel') Discard
+              a.button.is-light-blue(v-on:click='create') Create
 </template>
 
 <script>

client/js/components/modal-move-page.vue

@@ -1,18 +1,21 @@
 <template lang="pug">
-  .modal(v-bind:class='{ "is-active": isShown }')
+  transition(:duration="400")
-    .modal-background
+    .modal(v-show='isShown', v-cloak)
-    .modal-container
+      transition(name='modal-background')
-      .modal-content
+        .modal-background(v-show='isShown')
-        header.is-indigo Move document
+      .modal-container
-        section
+        transition(name='modal-content')
-          label.label Enter the new document path:
+          .modal-content(v-show='isShown')
-          p.control.is-fullwidth(v-bind:class='{ "is-loading": isLoading }')
+            header.is-indigo Move document
-            input.input(type='text', placeholder='page-name', v-model='movePath', ref='movePageInput', @keyup.enter='move', @keyup.esc='cancel')
+            section
-            span.help.is-red(v-show='isInvalid') This document path is invalid or not allowed!
+              label.label Enter the new document path:
-            span.note Note that moving or renaming documents can lead to broken links. Make sure to edit any page that links to this document afterwards!
+              p.control.is-fullwidth(v-bind:class='{ "is-loading": isLoading }')
-        footer
+                input.input(type='text', placeholder='page-name', v-model='movePath', ref='movePageInput', @keyup.enter='move', @keyup.esc='cancel')
-          a.button.is-grey.is-outlined(v-on:click='cancel') Discard
+                span.help.is-red(v-show='isInvalid') This document path is invalid or not allowed!
-          a.button.is-indigo(v-on:click='move') Move
+                span.note Note that moving or renaming documents can lead to broken links. Make sure to edit any page that links to this document afterwards!
+            footer
+              a.button.is-grey.is-outlined(v-on:click='cancel') Discard
+              a.button.is-indigo(v-on:click='move') Move
 </template>
 
 <script>

client/scss/components/modal.scss

@@ -1,10 +1,6 @@
 .modal {
 	align-items: flex-start;
-	display: none;
+	display: block;
-
-	&.is-active {
-		display: block;
-	}
 
 	&.is-superimposed {
 		.modal-background {
@@ -23,8 +19,15 @@
 	height: 100vh;
 	position: fixed;
 	background-color: rgba(0,0,0,0.85);
-	animation: .4s ease fadeIn;
 	z-index: 10;
+
+  &-enter-active {
+    animation: .4s ease fadeIn;
+  }
+  &-leave-active {
+    animation: .4s ease fadeOut;
+  }
+
 }
 .modal-container {
 	position: fixed;
@@ -38,10 +41,16 @@
 	align-items: center;
 }
 .modal-content {
-	animation: .3s ease zoomIn;
 	width: 600px;
 	background-color: #FFF;
 
+  &-enter-active {
+    animation: .3s ease zoomIn;
+  }
+  &-leave-active {
+    animation: .3s ease zoomOut;
+  }
+
 	&.is-expanded {
 		align-self: stretch;
 		width: 100%;