✨ feat: add fade up animation to post page, optimize global animation curves and durations, refine animation-related naming conventions

src/components/Widgets/FadeUpAnimation.astro

@@ -0,0 +1,18 @@
+<script>
+function resetFadeUpAnimation() {
+  document.querySelectorAll('.animation-fade-up').forEach((container) => {
+    const childElements = Array.from(container.children).slice(0, 20)
+    childElements.forEach(element =>
+      (element as HTMLElement).style.animationName = 'none',
+    )
+    requestAnimationFrame(() => {
+      childElements.forEach(element =>
+        (element as HTMLElement).style.animationName = '',
+      )
+    })
+  })
+}
+
+resetFadeUpAnimation()
+document.addEventListener('astro:page-load', resetFadeUpAnimation)
+</script>

src/components/Widgets/GoBack.astro

@@ -5,7 +5,7 @@ import GoBackIcon from '@/assets/icons/go-back.svg';
 <button
   id="back-button"
   class="hidden"
-  lg="block absolute c-secondary/40 left--10 top-1/2 aspect-square w-4.5 translate-y--1/2 transition-colors c-secondary active:scale-90 hover:c-primary/80"
+  lg="block absolute c-secondary/40 left--10 top-1/2 aspect-square w-4.5 translate-y--1/2 transition-colors duration-300 ease-out c-secondary active:scale-90 hover:c-primary/80"
   aria-label="Go back"
 >
   <GoBackIcon

src/components/Widgets/TOC.astro

@@ -29,7 +29,7 @@ const filteredHeadings = headings.filter(heading =>
     <div class="relative h-12 w-full">
       <label
         for="toc-toggle"
-        class="absolute inset-0 flex cursor-pointer items-center 2xl:(static flex c-secondary/40 transition-colors hover:c-secondary/80)"
+        class="absolute inset-0 flex cursor-pointer items-center 2xl:(static flex c-secondary/40 transition-colors duration-300 ease-out hover:c-secondary/80)"
       >
         <span class="toc-title">
           {currentUI.toc}