From e7ed0fa833bdf2b954b4211cf80265f5de0fd191 Mon Sep 17 00:00:00 2001
From: Julian Freeman <freemanjulian372@gmail.com>
Date: Sat, 14 Mar 2026 21:23:50 -0400
Subject: [PATCH] fix anim

---
 src/App.vue | 28 ++++++++++++++++++----------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 1f00308..e92e31a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="app-container">
-    <transition name="fade">
+    <!-- 启动屏专属过渡 -->
+    <transition name="layout-fade">
       <SplashScreen v-if="!store.isInitialized" :status-text="store.initStatus" />
     </transition>
 
@@ -8,7 +9,8 @@
       <Sidebar />
       <div class="main-content">
         <router-view v-slot="{ Component }">
-          <transition name="fade" mode="out-in">
+          <!-- 页面切换专属过渡：极简、快速 -->
+          <transition name="page-fade" mode="out-in">
             <component :is="Component" />
           </transition>
         </router-view>
@@ -74,19 +76,25 @@ body {
   position: relative;
 }
 
-/* 页面切换动画 */
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.4s ease, transform 0.4s ease;
+/* 1. 布局级别过渡 (Splash -> App): 优雅、大气 */
+.layout-fade-enter-active,
+.layout-fade-leave-active {
+  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.fade-enter-from {
+.layout-fade-leave-to {
   opacity: 0;
-  transform: scale(0.98);
+  transform: scale(1.05);
 }
 
-.fade-leave-to {
+/* 2. 页面级别过渡 (Essentials <-> Updates): 快速、响应灵敏 */
+.page-fade-enter-active,
+.page-fade-leave-active {
+  transition: opacity 0.15s ease;
+}
+
+.page-fade-enter-from,
+.page-fade-leave-to {
   opacity: 0;
-  transform: scale(1.02);
 }
 </style>