如何为可折叠侧边栏添加平滑过渡动画？

针对你遇到的手动指定宽度、文本回流、max-width延迟等问题，以下是几个实用的解决方案：

方案1：Flex布局 + flex-basis过渡（推荐） #

利用Flex布局的flex-basis属性实现自适应宽度，无需手动设置固定值，同时配合透明度过渡避免文本回流。

代码示例 #

<div class="container">
  <aside class="sidebar">
    <button class="toggle-btn">×</button>
    <nav>
      <a href="#">菜单1</a>
      <a href="#">菜单选项2</a>
      <a href="#">长名称菜单3</a>
    </nav>
  </aside>
  <main class="content">主内容区域</main>
</div>

.container {
  display: flex;
  height: 100vh;
}

.sidebar {
  flex-basis: auto; /* 宽度由内容自动决定 */
  background: #f0f0f0;
  padding: 1rem;
  transition: flex-basis 0.3s ease, opacity 0.2s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 收起状态 */
.sidebar.collapsed {
  flex-basis: 0; /* 收缩到0宽度 */
  opacity: 0; /* 提前隐藏内容，避免文本挤压回流 */
  padding: 1rem 0; /* 保留垂直内边距，防止高度跳动 */
}

.toggle-btn {
  align-self: flex-end;
  border: none;
  background: transparent;
  font-size: 1.5rem;
  cursor: pointer;
}

.content {
  flex: 1;
  padding: 1rem;
}

const toggleBtn = document.querySelector('.toggle-btn');
const sidebar = document.querySelector('.sidebar');

toggleBtn.addEventListener('click', () => {
  sidebar.classList.toggle('collapsed');
});

解决的问题：

• 无需手动指定宽度，flex-basis: auto自动适配内容宽度
• 利用opacity过渡提前隐藏文本，避免收起时的回流视觉问题
• 动画平滑，兼容性覆盖绝大多数现代浏览器

方案2：width: fit-content + 过渡 #

借助CSS的fit-content属性直接获取内容宽度，配合overflow:hidden实现过渡，同时优化文本显示逻辑。

代码示例（仅修改CSS部分） #

.sidebar {
  width: fit-content; /* 宽度完全由内容决定 */
  background: #f0f0f0;
  padding: 1rem;
  transition: width 0.3s ease, opacity 0.2s ease;
  overflow: hidden;
}

.sidebar.collapsed {
  width: 0;
  opacity: 0;
  padding: 1rem 0;
}

.sidebar nav a {
  display: block;
  margin: 0.5rem 0;
  transition: opacity 0.1s ease;
}

.sidebar.collapsed nav a {
  opacity: 0; /* 单独控制文本透明度，进一步优化视觉效果 */
}

注意：fit-content不支持IE浏览器，适合目标用户为现代浏览器的场景。

方案3：动态max-width解决延迟问题 #

如果你倾向于使用max-width方案，可以通过JS动态获取菜单的自然宽度，避免静态设置过大值导致的动画延迟。

代码示例 #

.sidebar {
  max-width: var(--sidebar-width); /* 用CSS变量存储动态宽度 */
  width: 100%;
  background: #f0f0f0;
  padding: 1rem;
  transition: max-width 0.3s ease;
  overflow: hidden;
}

.sidebar.collapsed {
  max-width: 0;
}

const sidebar = document.querySelector('.sidebar');
// 初始化时获取菜单自然宽度，赋值给CSS变量
sidebar.style.setProperty('--sidebar-width', `${sidebar.scrollWidth}px`);

const toggleBtn = document.querySelector('.toggle-btn');
toggleBtn.addEventListener('click', () => {
  sidebar.classList.toggle('collapsed');
});

解决的问题：

• 彻底解决max-width值过高导致的动画延迟
• 宽度仍由内容自动决定，无需手动设置

额外优化：结合display:none提升渲染效率 #

如果担心收起后菜单仍占用渲染资源，可以在动画结束后设置display: none，展开前恢复显示，兼顾动画效果和性能：

toggleBtn.addEventListener('click', () => {
  if (sidebar.classList.contains('collapsed')) {
    // 展开：先恢复显示，再触发动画
    sidebar.style.display = 'flex';
    setTimeout(() => {
      sidebar.classList.remove('collapsed');
    }, 10);
  } else {
    // 收起：先触发动画，结束后隐藏
    sidebar.classList.add('collapsed');
    setTimeout(() => {
      sidebar.style.display = 'none';
    }, 300); // 时长与transition一致
  }
});

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