必须同时覆盖.collapse和.collapsing的transition属性并加!important，保留height过渡以兼容bootstrap js逻辑；卡顿跳变主因是height:auto不可动画及js高度计算时机不准；max-height方案需禁用height依赖并谨慎设值。
直接改 .collapse, .collapsing 的 transition 属性
bootstrap 5 默认用 height 0.35s ease 控制过渡，但这个值写死在 css 里，且带 !important。你自定义的样式如果没加 !important，基本会被覆盖。
必须显式覆盖这两个类，否则动画时长不变：
-
.collapse, .collapsing都要写，缺一不可——.collapsing是 JS 在过渡中动态添加的中间状态类，只改.collapse不生效 - 必须保留
height作为过渡属性，否则折叠逻辑会断（Bootstrap JS 依赖 height 计算和内联设置） - 时间单位建议用
s而非ms，避免小数点后位数过多导致解析异常
示例：
.collapse, .collapsing {
transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
为什么改了 CSS 还是卡顿或跳变
常见现象是过渡时间变了，但展开瞬间“闪一下”或收起后高度残留。这通常不是时间问题，而是 height 动画本身的限制导致的。
-
height: auto无法参与 CSS transition，Bootstrap 内部会先读取内容高度再设为具体 px 值，这个过程若被中断（比如 JS 提前移除.collapsing），就会留下内联style="height: XXpx" - 如果内容高度变化大（比如含图片、异步加载文本），JS 计算 height 的时机可能早于渲染完成，导致目标高度不准
- 父容器没有
overflow: hidden，收起时内容会溢出，视觉上像“没动”
临时缓解办法：给 .collapse 加 overflow: hidden !important，并确保父级不塌陷（比如设 min-height: 1px）。
想用 max-height 替代 height 过渡？小心兼容性陷阱
这是绕过 height: auto 不可过渡问题的常用方案，但 Bootstrap 5 默认不走这条路，需手动接管。
- 必须移除所有对
height的依赖：给.collapse加height: auto !important，否则 JS 设置的内联 height 会覆盖你的max-height -
max-height值不能设太小（比如100px），否则内容多时会裁剪；也不能设太大（比如1000px），否则收起动画慢且有延迟感 - IE 和旧版 Safari 对
max-height过渡支持不稳定，若需兼容，仍建议坚持用height+ 手动 JS 补高
最小可用配置：
.collapse {
height: auto !important;
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease-in-out, opacity 0.2s ease-in;
}
.collapse.show {
max-height: 500px; /* 根据实际内容微调 */
}
过渡结束后 DOM 状态异常，比如 height 残留或箭头方向错乱
这不是 CSS 问题，而是 Bootstrap JS 的事件时机与 CSS 过渡未对齐。JS 在 CSS 过渡完成前就触发了 shown.bs.collapse，并清除了 .collapsing 类，导致浏览器中断 transition，同时保留了内联 height。
- 检查是否监听了
shown.bs.collapse后立刻操作 DOM（比如插入新节点），这会干扰重排，加剧残留 - 避免在
show类刚加上时就调用getBoundingClientRect()或读取offsetHeight，此时 height 还没真正应用 - 箭头方向错乱往往是因为
aria-expanded没同步更新——JS 状态和 DOM 属性脱节，需确认按钮的aria-expanded是否随.show类增删实时切换
最稳妥的做法：不依赖内联 height 清理，改用 setTimeout 延迟清理，或监听 transitionend 事件后再操作。
