直接改 .collapse 和 .collapsing 的 transition 即可调整 bootstrap 5 accordion 展开动画速度，需同时覆盖两者的 height 过渡并加 !important，例如 .collapse, .collapsing { transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important; }，仅改 .collapse 或 .collapse.show 无效，且必须保留 height 属性以兼容 js 高度计算逻辑。
直接改 .collapse 和 .collapsing 的 transition
Bootstrap 5 的 Accordion 展开动画速度由 height 的 CSS transition 控制，默认是 height 0.35s ease，且带 !important。你自定义的样式若没加 !important，基本无效。
必须同时覆盖两个类，缺一不可：
-
.collapse是基础状态类 -
.collapsing是 JS 在过渡中动态添加的中间状态类；只改.collapse不会触发动画
示例（放在 Bootstrap CSS 之后）：
.collapse, .collapsing {
transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
注意：必须保留 height 作为过渡属性，否则 Bootstrap JS 内部的高度计算和内联设置会失效，导致折叠逻辑中断。
为什么改了时间还是卡顿或“闪一下”
常见现象是动画变慢了，但展开瞬间内容先全显、再收缩、最后下拉，或收起后残留高度——这通常不是时间问题，而是 height: auto 无法参与 CSS transition 导致的。
根本原因：
- Bootstrap JS 先读取内容真实高度，再设为具体
px值；若此时 DOM 渲染未完成（比如图片还没加载完），目标高度就估小了 - 父容器没设
overflow: hidden，收起时内容溢出，视觉上像“没动” - JS 提前移除
.collapsing类，导致 transition 被中断，内联style="height: XXpx"残留
临时缓解：
- 给
.collapse加overflow: hidden !important - 确保父级不塌陷，比如加
min-height: 1px
想用 max-height 替代 height？先砍掉 JS 依赖
max-height 方案能绕过 height: auto 不可动画的问题，但 Bootstrap 5 默认不走这条路，需手动接管。
必须做三件事：
- 给
.collapse加height: auto !important，否则 JS 设置的内联height会覆盖你的max-height -
max-height值不能设太小（如100px）导致裁剪，也不能太大（如1000px）导致收起慢且有延迟感 - IE 和旧版 Safari 对
max-height过渡支持不稳定；若需兼容，仍建议坚持用height+ 手动补高
最小可用配置示例：
.collapse {
height: auto !important;
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease-in-out, opacity 0.2s ease-in;
}
别漏掉 .collapsing 类，也别只盯 .show
有人只给 .collapse.show 写 transition，结果动画完全不生效——因为过渡起点是 .collapsing 状态，不是 .show。
.collapse.show 只在展开完成后存在，它不参与“从隐藏到展开”的过渡过程；真正控制动画节奏的是 .collapse 和 .collapsing 的联合 transition。
另外，transition 时间单位建议用 s（如 0.6s），避免小数点后位数过多（如 600ms）导致某些浏览器解析异常。
最易被忽略的点：改完 CSS 后，务必检查是否所有 Accordion 项都用了标准结构，特别是 data-bs-parent 是否指向外层唯一 ID——否则 JS 无法正确触发过渡流程，动画根本不会启动。
