Bootstrap 4导航展开时折叠动画卡顿，收起过程运行正常

我之前也碰到过这个烦人的问题！Bootstrap 4 的 collapse 组件在展开导航菜单时出现卡顿，收起却正常，大概率是和元素的高度计算或者样式冲突有关，这里给你几个实测有效的解决方案：

• 检查导航菜单内的元素样式
  有时候菜单里的子元素如果设置了 margin-top 或者 margin-bottom，会干扰 collapse 组件计算高度的过程，导致动画卡顿。建议把这些外边距换成 padding，或者给菜单容器加一个 overflow:hidden（注意不要影响正常内容显示）。示例代码：

  .navbar-nav .nav-item {
    padding: 0.5rem 0;
    /* 替换原来的 margin-top/margin-bottom */
  }
  

• 手动修正菜单高度计算逻辑
  Bootstrap 的 collapse 是通过动态计算高度实现动画的，如果初始高度计算不准确就会出现卡顿。可以在展开事件触发时，手动获取菜单的真实高度，再从0开始执行动画：

  $('.navbar-collapse').on('show.bs.collapse', function() {
    // 先获取真实高度
    $(this).css('height', 'auto');
    const menuHeight = $(this).height();
    // 重置为0，准备动画
    $(this).css('height', 0);
    // 延迟触发动画，确保浏览器能正确识别高度变化
    setTimeout(() => {
      $(this).css('height', menuHeight);
    }, 10);
  });
  

  这段代码能规避组件自动计算高度时的偏差，让展开动画更流畅。

• 禁用可能导致卡顿的硬件加速
  有时候浏览器的硬件加速反而会拖垮动画性能，你可以试试给 collapse 容器添加样式，关闭不必要的硬件加速：

  .navbar-collapse {
    transform: none !important;
    /* 禁用可能引发卡顿的硬件加速变换 */
  }
  

• 排查其他脚本冲突
  如果页面里还有其他操作DOM的脚本（比如滚动监听、自定义元素动画），可能会和 Bootstrap 的 collapse 动画抢占浏览器资源。可以暂时禁用其他脚本测试，找到冲突源后调整执行顺序或者优化脚本性能。

补充提示：如果是移动端出现的卡顿，也可以检查一下系统的"减少动画"设置，有些设备默认会限制动画效果，导致看起来卡顿。

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