feat: use Swug for transition animations instead of ViewTransitions

src/components/Footer.astro

@@ -5,9 +5,9 @@ import {profileConfig} from "../config";
 ---
 
 <div class="card-base max-w-[var(--page-width)] min-h-[4.5rem] rounded-b-none mx-auto flex items-center px-6">
-    <div class="text-50 text-sm">
+    <div class="transition text-50 text-sm">
         © 2023 {profileConfig.name}. All Rights Reserved.
         <br>
-        Powered by <a class="link text-[var(--primary)]" target="_blank" href="https://github.com/saicaca/fuwari">Fuwari</a>
+        Powered by <a class="link text-[var(--primary)] font-medium" target="_blank" href="https://github.com/saicaca/fuwari">Fuwari</a>
     </div>
 </div>

src/components/GlobalStyles.astro

@@ -236,5 +236,13 @@ color_set({
     .text-25 {
         @apply text-black/25 dark:text-white/25
     }
+
+    html.is-changing .transition-fade {
+        @apply transition-all duration-200
+    }
+    html.is-animating .transition-fade {
+        @apply opacity-0 translate-y-4
+    }
 }
+
 </style>

src/components/Navbar.astro

@@ -16,7 +16,7 @@ let links: NavBarLink[] = navBarConfig.links.map((item: NavBarLink | LinkPreset)
 });
 
 ---
-<div transition:animate="none" class:list={[
+<div class:list={[
     className,
     "card-base sticky top-0 overflow-visible max-w-[var(--page-width)] h-[4.5rem] rounded-t-none mx-auto flex items-center justify-between px-4"]}>
     <a href="/" class="btn-plain h-[3.25rem] px-5 font-bold rounded-lg active:scale-95">

src/components/control/BackToTop.astro

@@ -3,7 +3,7 @@ import { Icon } from 'astro-icon/components';
 ---
 
 <!-- There can't be a filter on parent element, or it will break `fixed` -->
-<div class="back-to-top-wrapper hidden lg:block" transition:persist>
+<div class="back-to-top-wrapper hidden lg:block">
     <div id="back-to-top-btn" class="back-to-top-btn hide flex items-center rounded-2xl overflow-hidden transition" onclick="backToTop()">
         <button aria-label="Back to Top" class="btn-card h-[3.75rem] w-[3.75rem]">
             <Icon name="material-symbols:keyboard-arrow-up-rounded" class="mx-auto"></Icon>

src/components/widget/SideBar.astro

@@ -5,11 +5,11 @@ import Categories from "./Categories.astro";
 
 const className = Astro.props.class;
 ---
-<div id="sidebar" class:list={[className, "w-full"]} transition:persist>
-    <div class="flex flex-col w-full gap-4 mb-4" transition:animate="none">
+<div id="sidebar" class:list={[className, "w-full"]}>
+    <div class="flex flex-col w-full gap-4 mb-4">
         <Profile></Profile>
     </div>
-    <div class="flex flex-col w-full gap-4 top-4 sticky top-4" transition:animate="none">
+    <div class="flex flex-col w-full gap-4 top-4 sticky top-4">
         <Categories></Categories>
         <Tag></Tag>
     </div>