From 95398e074a06e323d7895f3c4d33d949538a743c Mon Sep 17 00:00:00 2001
From: coolzr <rzlrong@outlook.com>
Date: Sat, 18 Oct 2025 17:16:15 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E5=81=B6=E5=8F=91=E6=B8=B2=E6=9F=93=E9=94=99=E8=AF=AF=E4=B8=8E?=
 =?UTF-8?q?=E9=97=AA=E7=83=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. CSS 主题预加载: 浅色变量同时应用到 html.theme-preload，避免首帧读取到暗色变量导致的错色与闪烁
2. transition:
	- 移除会引起首帧抖动的相关transition：侧边栏的 width/transform 和 .content 的 transition
	- 新增作用域类 .with-anim，仅在交互（点击折叠按钮）时启用侧边栏transition，首屏不加载动画
3. 页面与分类卡片动画:
	- 移除 .page.active 的位移动画，保留透明度过渡
	- 移除 .category 的进入动画（opacity:0 + fadeIn），避免分类卡片在切页时产生浮动效果

脚本调整: 在 toggleSidebarCollapse 时添加 documentElement.with-anim，使布局过渡仅在用户交互时生效

Fixes #17
---
 assets/style.css | 25 ++++++++++++++++---------
 src/script.js    |  5 ++++-
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/assets/style.css b/assets/style.css
index fb21d20..5c9f166 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -28,7 +28,8 @@
     --sidebar-collapsed-width: 60px;
 }
 
-/* 浅色主题 */
+/* 浅色主题：预加载阶段同样应用变量，避免读取默认暗色值 */
+html.theme-preload,
 body.light-theme {
     --bg-color: #e0e0d8;
     --sidebar-bg: #f0f0eb;
@@ -273,7 +274,7 @@ body.loaded .layout {
     scrollbar-width: thin; /* Firefox */
     scrollbar-color: var(--scrollbar-color) transparent; /* Firefox */
     overflow-y: hidden; /* 防止整个侧边栏滚动 */
-    transition: width 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
+    transition: background-color 0.3s ease;
 }
 
 /* 侧边栏折叠状态 */
@@ -332,7 +333,7 @@ body.loaded .layout {
     margin-bottom: 0;
     padding-left: 0.5rem;
     letter-spacing: 0.5px;
-    transition: opacity 0.3s ease, transform 0.3s ease, width 0.3s ease;
+    transition: opacity 0.3s ease, transform 0.3s ease;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -589,7 +590,6 @@ body.loaded .layout {
     align-items: center;
     /* 隐藏滚动条但保持滚动功能 */
     scrollbar-width: none; /* Firefox */
-    transition: background-color 0.3s ease, margin-left 0.3s ease, max-width 0.3s ease;
 }
 
 .content::-webkit-scrollbar {
@@ -602,6 +602,15 @@ body .content.expanded {
     max-width: calc(100vw - var(--sidebar-collapsed-width));
 }
 
+/* 仅在交互时启用布局相关过渡，避免首帧闪烁 */
+.with-anim .sidebar {
+    transition: width 0.3s ease, background-color 0.3s ease;
+}
+
+.with-anim .content {
+    transition: background-color 0.3s ease, margin-left 0.3s ease, max-width 0.3s ease;
+}
+
 /* 搜索框容器 - 固定在顶部 */
 .search-container {
     width: 100%;
@@ -762,7 +771,6 @@ body .content.expanded {
 
 .page.active {
     display: flex;
-    animation: fadeIn 0.3s ease-out forwards;
 }
 
 /* 欢迎区域 */
@@ -843,8 +851,7 @@ body .content.expanded {
     max-width: 1300px;
     position: relative;
     z-index: 1;
-    opacity: 0;
-    animation: fadeIn 0.5s ease-out forwards;
+    opacity: 1; /* 移除进入时的浮动/淡入动画，避免切页时跳动 */
     box-shadow: 0 4px 20px var(--shadow-color);
     border: 1px solid var(--border-color);
     transition: background 0.3s ease, box-shadow 0.3s ease;
@@ -1189,7 +1196,7 @@ body .content.expanded {
     .sidebar {
         transform: translateX(-100%);
         box-shadow: none;
-        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s ease;
+        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     }
     
     .sidebar .logo {
@@ -1723,4 +1730,4 @@ body .content.expanded {
     background-color: var(--accent-color);
     z-index: 1000;
     transition: width 0.1s ease-out;
-}
\ No newline at end of file
+}
diff --git a/src/script.js b/src/script.js
index 350706f..74367b9 100644
--- a/src/script.js
+++ b/src/script.js
@@ -411,6 +411,9 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // 侧边栏折叠功能
     function toggleSidebarCollapse() {
+        // 仅在交互时启用布局相关动画，避免首屏闪烁
+        document.documentElement.classList.add('with-anim');
+
         isSidebarCollapsed = !isSidebarCollapsed;
 
         // 使用 requestAnimationFrame 确保平滑过渡
@@ -1255,4 +1258,4 @@ document.addEventListener('DOMContentLoaded', () => {
             setTimeout(initSearchIndex, 1000);
         }
     });
-});
\ No newline at end of file
+});