Bootstrap 5 collapse 动画卡顿主因是 height 不可过渡、!important 覆盖冲突及 overflow/visibility 未同步；应显式覆盖 .collapse/.collapsing transition 或改用 transform+opacity 方案，并确保 JS 事件与 CSS 时序对齐。
折叠面板展开/收起时动画卡顿或不生效
Bootstrap 5 的 collapse 组件默认依赖 height、visibility 和 opacity 的 CSS 过渡，但只对 height 做了 transition（且设为 0.35s ease）。如果直接改 transition 属性却没生效，大概率是因为：① 覆盖时机不对（被 Bootstrap 的 !important 覆盖），② 没处理 height: 0 → height: auto 这个不可过渡的转换，③ 忘了同步控制 overflow 和 visibility。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在自定义 CSS 中用
!important显式覆盖.collapse和.collapsing的transition，例如：.collapse, .collapsing { transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; } - 必须保留
.collapsing类——这是 Bootstrap 在过渡中动态添加的中间状态类，仅靠.collapse.show无法触发过渡 - 避免单独给
.collapse.show设transition，它只在显示态存在，不参与“从隐藏到展开”的过渡起点
想用 transform 或 opacity 替代 height 动画
直接用 transform: scaleY() 或 opacity 替换 height 是可行的，但需绕过 Bootstrap 默认的 height 计算逻辑。因为 bs-collapse 会强制读取元素高度并内联设置 style="height: XXpx"，这会干扰 transform 动画。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 移除所有对
height的依赖：给.collapse加height: auto !important，再用transform控制缩放 - 配合
overflow: hidden防止内容溢出，例如：.collapse { height: auto !important; overflow: hidden; } .collapse:not(.show) { transform: scaleY(0); transform-origin: top; } .collapse.show { transform: scaleY(1); } .collapse { transition: transform 0.3s ease-in-out, opacity 0.2s ease-in; } - 注意：此时需手动确保父容器不塌陷（比如加
min-height），否则视觉上会有跳动
动画结束后 DOM 状态异常（如高度残留、内容错位）
常见于自定义 transition 时间与 Bootstrap JS 的 shown.bs.collapse / hidden.bs.collapse 事件不同步。JS 在过渡结束前就移除了 .collapsing 类，导致 CSS 过渡被中断，内联 height 值残留。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保自定义
transition时间 ≤ Bootstrap 默认的350ms，或通过 JS 监听事件后主动清理：document.addEventListener('hidden.bs.collapse', e => { e.target.style.height = ''; }); - 若使用
transform方案，可完全忽略height内联样式，把data-bs-parent或手动生成的bsCollapse实例的toggle方法替换成纯 CSS 切换类名（即不用data-bs-toggle="collapse"，改用 JS 控制classList.toggle('show')） - 务必测试移动端 Safari —— 它对
transform + overflow: hidden组合有渲染 bug，有时需加-webkit-transform: translateZ(0)强制 GPU 加速
多个折叠面板联动时动画不同步
当一组 accordion 使用 data-bs-parent 时，Bootstrap 会依次关闭其他项再打开当前项，造成“先关后开”的串行动画。如果每个面板都设了相同 transition 时间，看起来就是一卡一卡的。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 去掉
data-bs-parent，改用 JS 手动控制：点击时先收集所有其他.collapse.show元素，调用hide()，再对目标调用show()，并用Promise.all()等待全部hidden.bs.collapse触发后再执行show()，实现并行收起+展开 - 更轻量的做法：给所有面板统一加
transition-delay: 0s，并确保它们的transition-duration完全一致，避免因 JS 执行微小延迟导致视觉错帧 - 不要依赖
max-height过渡（比如设max-height: 0 → 500px），它在内容高度变化时容易出现动画不精准、收不严的问题
!important 后又忘了清内联 style，或者用了 transform 却没关掉 Bootstrap 自己的高度计算逻辑——这些地方一漏，动画就断在半路。 
