如何实现响应式可折叠侧边栏的平滑动画效果-html教程-PHP中文网

本文介绍一种结合 javascript 动态测量与 css 过渡的方案，解决纯 css 下 collapsible 侧边栏无法自适应内容宽度、文字重排和渲染性能等问题，实现自然、流畅、无硬编码宽度的展开/收起动画。

本文介绍一种结合 javascript 动态测量与 css 过渡的方案，解决纯 css 下 collapsible 侧边栏无法自适应内容宽度、文字重排和渲染性能等问题，实现自然、流畅、无硬编码宽度的展开/收起动画。

在构建现代 Web 应用时，一个常见需求是实现可折叠的侧边栏（Sidebar）——既节省空间，又保留导航功能。虽然通过 display: none 或 width: 0 配合 transition 可快速实现基础切换，但如问题所述，这类方案存在三大痛点：需预设固定宽度、内容文字随缩放重排、DOM 仍参与布局计算影响性能。

更优解在于：让 CSS 负责动画表现，JavaScript 负责动态“锚定”初始尺寸。核心思路是——在折叠前，用 getBoundingClientRect() 精确读取菜单内容的自然宽度，并将其作为过渡起点；收起时设为 0；展开时再恢复该宽度。这样既保留了内容驱动的自适应性，又规避了 max-width 带来的延迟感。

以下是完整实现方案：

✅ HTML 结构（语义清晰、层级合理）

<div class="container">
  <div class="menu">
    <div class="toggle">✕</div>
    <div class="menu-content">
      <div class="content">首页<br>项目<br>设置<br>帮助</div>
    </div>
  </div>
  <div class="main-content">主内容区域 —— 可自由滚动、响应式布局</div>
</div>

✅ CSS 样式（专注动画与布局控制）

.container {
  display: flex;
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  overflow: hidden;
}

.menu {
  background: #ffeb3b;
  flex: none;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.toggle {
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
  font-weight: bold;
  background: #ffc107;
  text-align: center;
}

.menu-content {
  flex: 1;
  overflow: hidden;
  transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* 缓动增强自然感 */
  width: fit-content; /* 初始按内容宽渲染 */
}

.menu-content .content {
  padding: 16px;
  white-space: nowrap; /* ✅ 关键！防止文字折行重排 */
  overflow: hidden;
  transition: opacity 0.4s ease;
}

.container.collapsed .menu-content {
  width: 0 !important; /* 强制覆盖 JS 设置的 width，确保收起 */
}

.container.collapsed .menu-content .content {
  opacity: 0;
}

✅ JavaScript 行为逻辑（精准测量 + 宽度托管）

function initCollapsibleMenu() {
  const toggleBtns = document.querySelectorAll('.menu .toggle');
  const containers = document.querySelectorAll('.container');

  // 初始化：为每个未折叠菜单记录其自然宽度
  function updateMenuWidth() {
    containers.forEach(container => {
      if (container.classList.contains('collapsed')) return;
      const menuContent = container.querySelector('.menu-content');
      const contentEl = menuContent.querySelector('.content');
      const naturalWidth = Math.ceil(contentEl.getBoundingClientRect().width) + 32; // +padding
      menuContent.style.width = `${naturalWidth}px`;
      contentEl.style.width = `${naturalWidth}px`; // 锁定内容区宽度，防重排
    });
  }

  // 绑定点击事件
  toggleBtns.forEach(btn => {
    btn.addEventListener('click', () => {
      const container = btn.closest('.container');
      const menuContent = container.querySelector('.menu-content');
      const isCollapsed = container.classList.contains('collapsed');

      if (isCollapsed) {
        // 展开：恢复测量后的宽度
        updateMenuWidth();
      } else {
        // 收起：先记录当前宽度，再设为 0
        const currentWidth = parseFloat(getComputedStyle(menuContent).width);
        menuContent.style.width = `${currentWidth}px`;
        // 强制重排，确保 transition 生效
        menuContent.offsetHeight;
        menuContent.style.width = '0';
      }

      container.classList.toggle('collapsed');
    });
  });

  // 首次加载时初始化宽度
  updateMenuWidth();

  // 可选：监听窗口 resize（如菜单内容动态变化）
  let resizeTimer;
  window.addEventListener('resize', () => {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(updateMenuWidth, 150);
  });
}

// 启动
document.addEventListener('DOMContentLoaded', initCollapsibleMenu);

⚠️ 注意事项与优化建议

white-space: nowrap 是防文字重排的关键：配合固定 .content 宽度，确保动画过程中文本不换行、不抖动；
避免 display: none 与 transition 混用：display 是离散属性，无法过渡，必须用 width / opacity / transform 等连续属性；
性能考量：getBoundingClientRect() 在动画中应避免高频调用；本方案仅在折叠/展开触发时执行一次，对性能无影响；
无障碍增强：可添加 aria-expanded 和 aria-controls 属性，提升屏幕阅读器支持；
移动端适配：建议在小屏下默认折叠，并通过汉堡图标唤出，可结合 @media (max-width: 768px) 控制。

该方案真正实现了「内容决定宽度、动画平滑可控、DOM 高效渲染」三者统一，是生产环境中兼顾体验与可维护性的推荐实践。