fix: 修复主题偶发渲染错误与闪烁

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
This commit is contained in:
coolzr
2025-10-18 17:16:15 +08:00
parent 354a069cd6
commit 95398e074a
2 changed files with 20 additions and 10 deletions

View File

@@ -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);
}
});
});
});