必须同时覆盖 .collapse 和 .collapsing 的 transition 才生效，因 bootstrap 5 accordion 动画依赖 js 切换状态、css 过渡执行，而 .collapsing 是 js 插入的中间态类，且默认 height 过渡带 !important，自定义样式须加 !important 并保留 height 属性。
必须同时覆盖 .collapse 和 .collapsing 的 transition 才生效
Bootstrap 5 的 Accordion 动画由 JS 控制状态切换，但动画本身完全依赖 CSS 的 transition。只改 .collapse 没用，因为过渡中 JS 会动态加 .collapsing 类——这个中间态才是动画真正发生的节点。
默认值是 height 0.35s ease，写死在 Bootstrap CSS 里且带 !important，你自己的样式若没加 !important，基本无效。
.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"，去掉就断逻辑
为什么改了速度还是卡顿或跳变
不是时间设错了，而是 height: auto 无法参与 CSS 过渡。JS 先读内容高度再设 px 值，这个过程若被中断（比如渲染未完成、图片没加载完），目标高度就不准，视觉上就是“闪一下”或收起后留白。
- 给父容器加
overflow: hidden !important，防止收起时内容溢出 - 确保父级不塌陷：比如给 Accordion 外层加
min-height: 1px - 图片加载延迟会导致 JS 高度估算偏小，可临时加
transition: none排查，确认后用font-display: swap或图片loading="lazy"优化
想换 max-height 或 transform 方案？先禁用 height 依赖
用 max-height 可绕过 height: auto 不可动画的问题，但 Bootstrap 默认不走这条路，必须手动接管。
- 先加
.collapse { height: auto !important; }，否则 JS 设置的内联height会盖掉你的max-height -
max-height值不能太小（如100px）——内容多会被裁剪；也不能太大（如1000px）——收起动画慢且有延迟感 - 更轻量的方案是
transform: scaleY()：.collapse:not(.show) { transform: scaleY(0); }+.collapse.show { transform: scaleY(1); }，但需加transform-origin: top并确保父容器有明确高度
.accordion-button::after 图标旋转不同步怎么办
Accordion 标题右侧的折叠箭头（默认是 SVG 或伪元素）不会随面板动画自动旋转，必须单独控制。
- 默认展开态图标朝下，收起态应朝右或朝上，靠
.collapsed类触发 - 加
.accordion-button.collapsed::after { transform: rotate(-180deg); transition: transform 0.2s; } - 别漏掉
transform-origin，否则旋转中心偏移，视觉错位
.collapsing 类的时机与 CSS 过渡结束不同步，导致内联 height 残留。这不是样式问题，得靠监听 shown.bs.collapse 事件手动清理，或者干脆换用 transform 方案绕过 height 计算。
