From d361bca2209bc3523d3023210c4e449ffa549a25 Mon Sep 17 00:00:00 2001
From: xfy <i@rua.plus>
Date: Fri, 3 Jul 2026 17:21:04 +0800
Subject: [PATCH] feat(ui): add smooth mount animation for route transitions

---
 input.css                         | 15 +++++++++++++++
 src/components/frontend_layout.rs |  8 ++++++--
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/input.css b/input.css
index 63c140e..6636ae6 100644
--- a/input.css
+++ b/input.css
@@ -44,6 +44,21 @@
     -moz-osx-font-smoothing: grayscale;
   }
 
+  @keyframes page-enter {
+    0% {
+      opacity: 0;
+      transform: translateY(16px) scale(0.995);
+    }
+    100% {
+      opacity: 1;
+      transform: none;
+    }
+  }
+
+  .animate-page-enter {
+    animation: page-enter 400ms cubic-bezier(0.22, 1, 0.36, 1) both;
+  }
+
   /* Minimalist custom scrollbars */
   * {
     scrollbar-width: thin;
diff --git a/src/components/frontend_layout.rs b/src/components/frontend_layout.rs
index fec098c..26b8c4a 100644
--- a/src/components/frontend_layout.rs
+++ b/src/components/frontend_layout.rs
@@ -59,8 +59,12 @@ pub fn FrontendLayout() -> Element {
                     ThemeToggle {}
                 },
             }
-            main { class: "flex-1 w-full max-w-4xl mx-auto px-6 py-6 md:py-12",
-                SuspenseBoundary { fallback: move |_| route_skeleton(&route), Outlet::<Route> {} }
+            main { class: "flex-1 w-full max-w-4xl mx-auto px-6 py-6 md:py-12 overflow-hidden",
+                div {
+                    key: "{route}",
+                    class: "animate-page-enter",
+                    SuspenseBoundary { fallback: move |_| route_skeleton(&route), Outlet::<Route> {} }
+                }
             }
             Footer {}
         }