feat: improved modal animations

client/js/components/anchor.vue

@@ -1,16 +1,19 @@
 <template lang="pug">
-  .modal(v-bind:class='{ "is-active": isShown }')
-    .modal-background
-    .modal-container
-      .modal-content
-        header.is-blue
-          span Copy link to this section
-        section
-          p.control.is-fullwidth
-            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
+  transition(:duration="400")
+    .modal(v-show='isShown', v-cloak)
+      transition(name='modal-background')
+        .modal-background(v-show='isShown')
+      .modal-container
+        transition(name='modal-content')
+          .modal-content(v-show='isShown')
+            header.is-blue
+              span Copy link to this section
+            section
+              p.control.is-fullwidth
+                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>