使用类与JavaScript时CSS标题栏收缩动画失效问题求助

核心问题分析 #

1. 标题栏动画不生效：你在JS中直接设置了titleBar.style.width = "75vw"，内联样式优先级高于@keyframes动画，导致动画被直接覆盖，无法触发。
2. 侧边栏与标题栏间的空白：侧边栏使用transform: translateX(-100%)时，仅做视觉偏移，不改变元素的布局空间，所以标题栏收缩后，侧边栏仍处于布局外，直到动画结束才会填充空白。

修复后的完整代码 #

HTML

<div id="sidebarDiv" class="sidebar">
    <div class="textSidebarContainer">
        <h4>ABOUT US</h4>
        <h4>SPONSORS</h4>
        <h4>SPONSORS</h4>
        <h4>DOCUMENTATION</h4>
        <h4>CONTACT US</h4>
    </div>
</div>
<div id="topDiv">
    <span id="textContainer">
        <button onclick="openSideMenu()" id="menuButton">☰</button>
        <h1 id="Title">Title text</h1>
    </span>
</div>

CSS

/* 全局基础设置 */
body {
  display: flex;
  margin: 0;
  overflow-x: hidden; /* 防止侧边栏滑入时出现横向滚动条 */
}

/* 标题栏样式 */
#topDiv {
  background-color: #A167A5;
  height: 6vw;
  width: 100vw;
  transition: width 1s linear; /* 用过渡代替@keyframes，状态切换更稳定 */
}

#textContainer {
  display: flex;
  justify-content: left;
  align-items: center;
  height: 5vw;
  padding-left: 1vw;
}

#menuButton {
  background: transparent;
  border: none;
  color: #E8D7F1;
  font-size: 2vw;
  cursor: pointer;
}

/* 侧边栏基础样式 */
.sidebar {
  width: 25vw; /* 包含padding的总宽度，对应标题栏收缩到75vw */
  background-color: #A167A5;
  color: #E8D7F1;
  height: 100vh; /* 用vh代替vw，适配视窗高度 */
  padding-left: 2.5vw;
  padding-right: 3vw;
  margin-left: -25vw; /* 初始隐藏在左侧 */
  transition: margin-left 1s linear; /* 过渡实现滑入效果 */
}

/* 侧边栏展开状态类 */
.sidebar.open {
  margin-left: 0;
}

/* 标题栏收缩状态类 */
#topDiv.shrink {
  width: 75vw;
}

JavaScript

const sidebar = document.getElementById("sidebarDiv");
const titleBar = document.getElementById("topDiv");
let sidebarOpen = false;

function openSideMenu() {
  if (sidebarOpen) {
    // 关闭侧边栏
    sidebar.classList.remove("open");
    titleBar.classList.remove("shrink");
  } else {
    // 打开侧边栏
    sidebar.classList.add("open");
    titleBar.classList.add("shrink");
  }
  sidebarOpen = !sidebarOpen;
}

关键修改点说明 #

1. 用CSS过渡代替@keyframes：过渡（transition）更适配简单的状态切换场景，避免动画与JS直接设置样式的冲突，代码更简洁易维护。
2. 调整侧边栏布局方式：用margin-left代替transform，让侧边栏滑入时占据实际布局空间，标题栏收缩时不会出现空白。
3. 移除JS直接设置样式的代码：所有视觉状态变化通过添加/移除CSS类实现，JS仅负责状态切换逻辑，职责更清晰。
4. 修正视窗单位：侧边栏高度改用100vh（视窗高度），避免100vw导致的高度适配异常。

内容的提问来源于stack exchange，提问作者George S.