通过导航栏页面切换时侧边栏重开动画优化问题

问题根源 #

你遇到的闪烁问题，本质是DOMContentLoaded事件触发时机晚于页面初始渲染：浏览器先根据HTML默认结构渲染出侧边栏关闭、亮色模式的状态，之后才执行事件回调添加active类或暗黑模式类，导致视觉上出现“闪一下”的切换。

解决方案：在页面渲染前提前应用状态 #

核心思路是在<body>元素开始渲染前就读取localStorage并设置对应的类，让页面从一开始就加载正确的状态，避免后续修改DOM样式引发的闪烁。

步骤1：在HTML头部添加预渲染脚本

把读取localStorage并设置类的代码放在<head>标签的末尾（确保在样式加载完成后、<body>渲染前执行）：

<head>
  <!-- 你的样式表、meta标签等内容 -->
  
  <script>
    // 处理侧边栏状态
    const sidebarActive = localStorage.getItem('sidebarActive') === 'true';
    if (sidebarActive) {
      // 给根元素添加标识类
      document.documentElement.classList.add('sidebar-active');
    }

    // 处理暗黑模式（同理）
    const darkModeActive = localStorage.getItem('darkMode') === 'true';
    if (darkModeActive) {
      document.documentElement.classList.add('dark-mode');
    }
  </script>
</head>

步骤2：调整CSS选择器

修改你的样式，基于根元素的类来控制侧边栏状态，而不是直接给.sidebar加active类：

/* 默认关闭状态 */
.sidebar {
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

/* 根元素有sidebar-active类时，侧边栏激活 */
:root.sidebar-active .sidebar {
  transform: translateX(0);
}

/* 暗黑模式同理 */
:root.dark-mode {
  background-color: #1a1a1a;
  color: #fff;
}

步骤3：更新交互逻辑的JS代码

原来的点击事件代码需要调整为操作根元素的类，同时可以移除DOMContentLoaded的回调（因为状态已经在页面加载前设置好了）：

const sidebarbtn = document.querySelector('#sidebar-btn');
const root = document.documentElement;

sidebarbtn.addEventListener('click', function () {
  // 切换根元素的sidebar-active类
  const isActive = root.classList.toggle('sidebar-active');
  // 更新localStorage
  localStorage.setItem('sidebarActive', isActive);
});

// 暗黑模式切换逻辑同理
const themeBtn = document.querySelector('#theme-btn');
themeBtn.addEventListener('click', function () {
  const isDark = root.classList.toggle('dark-mode');
  localStorage.setItem('darkMode', isDark);
});

额外优化：处理首次访问无localStorage的情况 #

如果用户是首次访问网站，localStorage里没有对应的状态，页面会保持默认状态（侧边栏关闭、亮色模式），这符合预期。如果需要设置默认激活状态，只需在脚本里给sidebarActive或darkModeActive设置默认值即可：

// 示例：默认打开侧边栏
const sidebarActive = localStorage.getItem('sidebarActive') !== 'false';

内容的提问来源于stack exchange，提问作者H3ry