Bootstrap navbar折叠展开过渡效果不流畅该如何解决？

问题根源 #

过渡不平滑主要来自两个核心原因：

1. CSS原生transition不支持对height: auto属性做平滑过渡，而Bootstrap的collapse组件默认是在height: 0和height: auto之间切换状态，仅给height属性加过渡自然会出现卡顿跳变。
2. 你直接给#navbar元素添加过渡规则，没有覆盖Bootstrap动画过程中自动添加的.collapsing类的默认设置，规则优先级不足也会导致动画异常。

修复步骤 #

• 先删除你之前给#navbar添加的transition样式
• 新增如下CSS规则，用max-height替代height实现过渡：

/* 覆盖Bootstrap默认折叠动画类 */
.collapsing {
  /* 同时过渡max-height、内边距、外边距，避免相关属性跳变 */
  transition: max-height 2s ease, padding 2s ease, margin 2s ease;
  overflow: hidden;
  max-height: 0;
}
/* 展开状态设置足够大的max-height，取值要大于导航栏展开后的实际最大高度 */
.collapse.show {
  max-height: 300px;
}

注意事项 #

如果只想给当前这个导航栏单独设置动画，可给选择器加上父级限制，修改为.navbar .collapsing和.navbar .collapse.show即可，避免影响页面其他使用collapse组件的元素。
另外max-height不要设置过大，比如你导航栏展开实际高度是150px，设置200px即可，设置过大会导致动画前半段无可见变化，看起来依然卡顿。

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