切换JS类时侧边栏折叠背景短暂变白问题求助

我正在设计一款侧边栏，定义了sidebar-wrapper-visible和sidebar-wrapper-invisible两个CSS类。点击汉堡菜单时，通过JS切换这两个类实现侧边栏的显示与折叠。期望侧边栏背景色为黑色，但折叠过程中会短暂变为白色，影响视觉体验。

相关CSS代码 #

.sidebar-wrapper-invisible {
  background-color:wheat;
  width:0px;
  transition:all 0.25s;
}

.sidebar-wrapper-visible {
  background-color:wheat;
  width:59px;
  height:100%;
  transition:all 0.25s;
}

JavaScript代码 #

const sidebar = document.getElementById('sidebar');
const menuBtn = document.getElementById('menuBtn');
const hambar = document.getElementById('hambar');


class Sidebar {
  closeHamburgerMenu() {
    hambar.classList.toggle('hambar-open');
  };

  enableSidebar() {
    sidebar.classList.toggle('sidebar-wrapper-invisible');
    sidebar.classList.toggle('sidebar-wrapper-visible');
  }
}

问题解决方法 #

• 统一基础样式，剥离过渡属性
  把侧边栏的固定样式（背景色、高度）提取到通用类中，仅在切换类里修改宽度，同时限制过渡仅作用于宽度，避免背景色参与过渡：

  /* 基础通用样式，始终生效 */
  .sidebar-wrapper {
    background-color: black; /* 设置目标黑色背景 */
    height: 100%;
    transition: width 0.25s; /* 仅对宽度做过渡动画 */
  }
  
  .sidebar-wrapper-invisible {
    width: 0px;
  }
  
  .sidebar-wrapper-visible {
    width: 59px;
  }
  

• 简化JS类切换逻辑
  不需要同时切换两个类，保留一个基础状态，仅切换单个类即可：

  class Sidebar {
    closeHamburgerMenu() {
      hambar.classList.toggle('hambar-open');
    };
  
    enableSidebar() {
      sidebar.classList.toggle('sidebar-wrapper-invisible');
      // 若默认状态为显示，则切换invisible类；反之切换visible类，根据实际布局调整
    }
  }
  

修改后，背景色会始终保持黑色，过渡仅针对宽度属性，彻底解决折叠过程中背景色变白的问题。

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