直接改 collapsing 类没效果，是因为 bootstrap 5 js 硬编码内联 style="height: 0px"，css 无法覆盖；正确做法是同时重写 .collapsing 和 .collapse.show 的 transition，改用 max-height 或 transform + opacity 动画，并确保状态类与 js 同步。
为什么直接改 collapsing 类没效果？
Bootstrap 5 的手风琴（Accordion）依赖 collapse 插件控制显隐，动画由 .collapsing 和 .collapse.show 两个状态类协同完成。很多人试图只覆盖 .collapse 的 height 或 transition，但失效的根本原因是：Bootstrap 在 JS 中硬编码了 height 的内联样式（比如 style="height: 0px"），CSS 层级再高也盖不过内联样式，除非用 !important —— 但这会破坏响应式逻辑。
正确替换动画：重写 .collapsing 和 .collapse.show 的 transition
Bootstrap 5 默认用 height + overflow 实现渐变折叠，但你可以安全替换成 max-height 动画（更稳定）或 opacity + transform（更轻量）。关键是要同时覆盖两个状态：
-
.accordion-collapse.collapse.collapsing：过渡中状态，设max-height: 0+overflow: hidden -
.accordion-collapse.collapse.show：展开后状态，设max-height: 500px（需预估最大内容高度） - 必须统一设置
transition: max-height 0.3s ease-in-out, opacity 0.2s ease，否则动画卡顿
示例：
.accordion-collapse.collapse.collapsing {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-in-out;
}
.accordion-collapse.collapse.show {
max-height: 500px; /* 要大于内容实际高度，否则截断 */
}
禁用默认 height 动画并启用 transform 缩放
如果内容高度不可预估（比如动态加载文本），max-height 方案容易出错。更鲁棒的做法是绕过尺寸动画，改用 transform: scaleY() + opacity：
- 先移除所有
height-related 的 transition（包括 Bootstrap 原生 CSS） - 给
.accordion-collapse加transform-origin: top -
.collapsing设transform: scaleY(0)、opacity: 0 -
.show设transform: scaleY(1)、opacity: 1 - 注意：JS 不会自动处理
transform的回流，所以不会影响布局计算，但需确保父容器有明确高度或overflow: visible
自定义动画时必须避开的坑
实际调试中最常踩的三个点：
- 忘记重置
.accordion-button::after的旋转动画 —— 折叠图标不会同步转，需单独加transition: transform 0.2s并在.collapsed里写transform: rotate(-180deg) - 用
display: none强制隐藏会导致 JS 判断失败，collapse插件认为元素“已销毁”，后续 toggle 失效 - 在
@media查询里覆盖动画时，没加!important—— Bootstrap 的 CSS 是从bootstrap.min.css直接加载的，媒体查询优先级常不够
复杂点在于：动画逻辑和 JS 状态必须严格对齐，任何一方脱节都会导致点击无反应或视觉/状态不一致。动手前先检查浏览器 devtools 里 class 切换是否实时发生，比盲目调 CSS 更快定位问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
