要使 Bootstrap 5 Accordion 动画生效，必须同时为 .collapse 和 .collapsing 设置 transition（含 height 属性及 !important），且 CSS 需后于 Bootstrap 加载；高度跳变或留白主因是 JS 估算高度时 DOM 未就绪，可加 min-height、overflow: hidden 或改用 transform: scaleY() 方案，同时确保 data-bs-parent 指向正确的 #ID。
必须同时覆盖 .collapse 和 .collapsing 的 transition 才生效
只改 .collapse 没用。Bootstrap 5 的 Accordion 动画由 JS 控制状态切换，但真正执行 CSS 过渡的是 .collapsing 这个中间态类——JS 在展开前加上它，动画结束时移除。默认样式里 .collapsing 带 !important，会直接盖掉你对 .collapse 的修改。
正确写法是：
.collapse, .collapsing {
transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
- 时间单位统一用
s（如0.4s），避免ms小数点过多导致浏览器解析异常 - 必须保留
height作为过渡属性，否则 Bootstrap JS 设置的内联style="height: XXpx"失效 - 自定义 CSS 必须放在 Bootstrap 官方 CSS 文件之后加载，否则被覆盖
为什么改了时间还是跳变或收起后留白？
不是时间设错了，而是 JS 读取内容高度时，DOM 渲染未完成、图片没加载完、字体未就绪，导致估算的高度偏小。动画中途“塌”一下，或收起后底部留白。
- 临时加
transition: none看是否还跳——如果消失，就是高度估算不准 - 给图片加
loading="lazy"或用font-display: swap减少阻塞 - 确保父容器有
min-height: 1px，防止塌陷干扰 JS 高度计算 - 给外层加
overflow: hidden !important，防止收起时内容溢出可见区域
想换更轻量的动画方案？先绕过 height 依赖
用 transform: scaleY() 可避免高度估算问题，但需手动接管逻辑，因为 Bootstrap JS 仍会往元素上写 height: XXpx 内联样式，和你的 transform 冲突。
立即学习“前端免费学习笔记（深入）”；
- 最小改动方案：
.collapse:not(.show) { transform: scaleY(0); } .collapse.show { transform: scaleY(1); }，并加transform-origin: top - 必须确保父容器有明确高度，否则
scaleY(0)会塌成一条线 - 别忘了同时禁用
height过渡，否则两个动画打架
data-bs-parent 写错会导致动画不触发
Accordion 的互斥折叠逻辑依赖 data-bs-parent 精确指向最外层容器 ID。写错就退化成独立模式，动画可能卡在 .collapsing 状态不结束。
- 错误写法：
data-bs-parent=".accordion"（用类名）、data-bs-parent="myAccordion"（漏#） - 正确写法：
data-bs-parent="#myAccordion"，且外层必须有<div id="myAccordion" class="accordion"> - 多个 Accordion 并存时，每个都必须用唯一 ID，不能共用同一
data-bs-parent值
