Merge pull request #22 from oneminch/feat/animate-scroll-btn

feat: add scale up transition to scroll button

components/AppScrollToTop.vue

@@ -21,19 +21,33 @@
 </script>
 
 <template>
-  <div
-    class="flex items-center gap-x-2 shadow-md rounded-full p-2 sm:p-1 bg-violet-50 dark:bg-zinc-900 border-2 sm:border border-violet-500"
-    :class="{ hidden: !enableButton }">
-    <button
+  <Transition name="scale">
+    <div
+      class="flex items-center gap-x-2 shadow-md rounded-full p-2 sm:p-1 bg-violet-50 dark:bg-zinc-900 border-2 sm:border border-violet-500"
       v-show="enableButton"
-      @click="scrollToTop"
-      class="action-item overflow-hidden transition-all duration-300 ease-in-out shadow-md !rounded-full hover:!px-6 !w-10 hover:!w-auto !h-10 !gap-x-0 sm:group"
-      aria-label="Scroll to Top">
-      <span
-        class="w-0 mr-0 overflow-hidden whitespace-nowrap transition-all duration-100 ease-in-out sm:group-hover:mr-2 sm:group-hover:w-32"
-        >Scroll to Top</span
-      >
-      <Icon name="ph:caret-line-up" class="text-lg" />
-    </button>
-  </div>
+      :class="{ hidden: !enableButton }">
+      <button
+        @click="scrollToTop"
+        class="action-item overflow-hidden transition-all duration-300 ease-in-out shadow-md !rounded-full hover:!px-6 !w-10 sm:hover:!w-auto !h-10 !gap-x-0 sm:group"
+        aria-label="Scroll to Top">
+        <span
+          class="w-0 mr-0 overflow-hidden whitespace-nowrap transition-all duration-100 ease-in-out sm:group-hover:mr-2 sm:group-hover:w-32"
+          >Scroll to Top</span
+        >
+        <Icon name="ph:caret-line-up" class="text-lg" />
+      </button>
+    </div>
+  </Transition>
 </template>
+
+<style scoped>
+  .scale-enter-active,
+  .scale-leave-active {
+    @apply transition-all duration-100 ease-linear;
+  }
+
+  .scale-enter-from,
+  .scale-leave-to {
+    @apply opacity-0 scale-75;
+  }
+</style>