Vue.js Bootstrap侧边栏折叠动画优化：实现平滑过渡效果

我之前做后台系统侧边栏的时候，也被这个问题折腾了好久——折叠过渡生硬，尤其是切换展开项时，旧菜单“啪”的一下就没了，新菜单直接弹出来，完全没有丝滑感。后来试了好几种方法，总结出两个最实用的方案，分享给你：

原生CSS没法直接对height: auto做过渡，这是绝大多数生硬折叠问题的根源。我们可以用max-height配合overflow: hidden来模拟，核心思路是给折叠状态的子菜单设置max-height: 0，展开时设置一个足够覆盖所有子菜单高度的max-height，再加上过渡动画。

示例代码：

/* 子菜单基础样式 */
.sidebar-submenu {
  max-height: 0;
  overflow: hidden;
  /* 调整过渡时间适配你的需求 */
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 展开状态的子菜单 */
.sidebar-item.expanded .sidebar-submenu {
  /* 设置一个比所有子菜单最大高度大的值，比如你的子菜单最多有8项，每项30px，设250px足够 */
  max-height: 250px;
}

💡 注意：max-height的取值要合理，太大的话过渡时间会出现延迟（比如设1000px，实际菜单只有100px，过渡会显得慢半拍）；太小的话内容会被截断。可以先测一下你最长的子菜单高度，再留20%的余量。

如果你的子菜单高度差异很大（有的只有2项，有的有10项），max-height的方法还是会有轻微的生硬感。这时候用JS动态计算真实高度，再触发过渡，效果会更完美。

实现步骤： #

1. CSS给子菜单设置基础的过渡和折叠状态
2. 切换菜单时，先关闭其他已展开的菜单，再对当前菜单执行展开/折叠逻辑
3. 展开时直接设置子菜单为真实高度；折叠时先把高度设为当前真实高度，再触发过渡到0

示例代码：

.sidebar-submenu {
  height: 0;
  overflow: hidden;
  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

// 切换菜单展开状态的主函数
function toggleSidebarItem(item) {
  const submenu = item.querySelector('.sidebar-submenu');
  const isExpanded = item.classList.contains('expanded');

  // 先关闭其他已展开的菜单
  document.querySelectorAll('.sidebar-item.expanded').forEach(expandedItem => {
    if (expandedItem !== item) {
      collapseSubmenu(expandedItem);
    }
  });

  isExpanded ? collapseSubmenu(item) : expandSubmenu(item);
}

// 展开子菜单
function expandSubmenu(item) {
  const submenu = item.querySelector('.sidebar-submenu');
  item.classList.add('expanded');
  // 设置为子菜单的真实高度（scrollHeight是元素内容的总高度）
  submenu.style.height = `${submenu.scrollHeight}px`;
}

// 折叠子菜单
function collapseSubmenu(item) {
  const submenu = item.querySelector('.sidebar-submenu');
  // 先把高度设为当前真实高度，确保过渡动画能触发
  submenu.style.height = `${submenu.scrollHeight}px`;
  
  // 等待浏览器渲染完成后，再把高度设为0
  requestAnimationFrame(() => {
    submenu.style.height = '0';
  });

  // 过渡结束后清理样式，避免影响后续操作
  submenu.addEventListener('transitionend', () => {
    item.classList.remove('expanded');
    submenu.style.height = ''; // 重置为auto，适配内容变化
  }, { once: true });
}

这个方法的优势在于，过渡完全贴合子菜单的真实高度，切换时旧菜单平滑收起，新菜单同步平滑展开，完全没有生硬感。

• 添加透明度过渡：给子菜单加上opacity的过渡，比如transition: height 0.3s ease, opacity 0.2s ease;，展开时opacity从0到1，折叠时从1到0，视觉上会更自然。
• 优化过渡曲线：用cubic-bezier(0.4, 0, 0.2, 1)替代默认的ease，这个曲线更符合用户对菜单滑动的预期，不会显得拖沓。
• 避免布局抖动：给侧边栏容器加上contain: layout paint;，告诉浏览器这个容器内的变化不会影响页面其他部分，提升渲染性能。
• 移动端适配：如果是移动端菜单，给点击元素加上touch-action: manipulation，禁用双击缩放，让点击响应更灵敏。

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