From 07f21dbe77f49333e75e8a4da83ceb6f6b4fc1fe Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Wed, 7 Jun 2023 11:06:41 -0700
Subject: [PATCH] refactor: modal animation

---
 components/Modal.vue | 54 ++++++++++++++++++++++++++++++++------------
 1 file changed, 40 insertions(+), 14 deletions(-)

diff --git a/components/Modal.vue b/components/Modal.vue
index ed2f0e39e..2e7710f20 100644
--- a/components/Modal.vue
+++ b/components/Modal.vue
@@ -39,21 +39,47 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div v-if="open" @keyup.esc="closeModal" ref="trapRef" class="fixed inset-0 z-10 overflow-y-auto" role="dialog" aria-dialog="true" :aria-labelledby="ariaLablledById" tabindex="-1">
-    <div @click="closeModal" class="fixed inset-0 z-0 bg-black bg-opacity-50 transition-opacity" />
-    <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-      <div :class="maxWidth" class="text-beta bg-alpha relative transform overflow-hidden rounded-lg px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:p-6">
-        <div v-if="showCloseX" class="absolute z-20 right-0 top-0 hidden pt-2 pr-2 sm:block">
-          <button @click="closeModal" type="button" class="rounded-md bg-alpha text-gray-400 p-2 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
-            <span class="sr-only">Close</span>
-            <XMarkIcon class="h-6 w-6" aria-hidden="true" />
-          </button>
-        </div>
+  <TransitionRoot appear :show="open" as="template">
+    <div @keyup.esc="closeModal" ref="trapRef" class="fixed inset-0 z-10 overflow-y-auto" role="dialog" aria-dialog="true" :aria-labelledby="ariaLablledById" tabindex="-1">
+      <TransitionChild
+        as="template"
+        enter="duration-300 ease-out"
+        enter-from="opacity-0"
+        enter-to="opacity-100"
+        leave="duration-200 ease-in"
+        leave-from="opacity-100"
+        leave-to="opacity-0"
+      >
+        <div
+          @click="closeModal"
+          class="fixed inset-0 z-0 bg-black bg-opacity-50 transition-opacity"
+          title="Click to close modal"
+        />
+      </TransitionChild>
+      <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+        <TransitionChild
+          as="template"
+          enter="duration-300 ease-out"
+          enter-from="opacity-0 scale-95"
+          enter-to="opacity-100 scale-100"
+          leave="duration-200 ease-in"
+          leave-from="opacity-100 scale-100"
+          leave-to="opacity-0 scale-95"
+        >
+          <div :class="maxWidth" class="text-beta bg-alpha relative transform overflow-hidden rounded-lg px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:p-6">
+            <div v-if="showCloseX" class="absolute z-20 right-0 top-0 hidden pt-2 pr-2 sm:block">
+              <button @click="closeModal" type="button" class="rounded-md bg-alpha text-gray-400 p-2 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+                <span class="sr-only">Close</span>
+                <XMarkIcon class="h-6 w-6" aria-hidden="true" />
+              </button>
+            </div>
 
-        <h1 v-if="title" :id="ariaLablledById">{{ title }}</h1>
-        <h2 v-if="description">{{ description }}</h2>
-        <slot />
+            <h1 v-if="title" :id="ariaLablledById">{{ title }}</h1>
+            <h2 v-if="description">{{ description }}</h2>
+            <slot />
+          </div>
+        </TransitionChild>
       </div>
     </div>
-  </div>
+  </TransitionRoot>
 </template>