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:
@@ -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);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user