直接改 .collapsing 的 height 没用，因 bootstrap 5 js 硬编码内联 height 样式，覆盖 css 过渡；应改用 max-height 或 transform: scaley() 实现平滑动画，并同步处理图标旋转、间距跳变和焦点问题。
为什么直接改 .collapsing 的 height 没用？
因为 Bootstrap 5 的 JS 在折叠过程中会硬编码写入 style="height: 0px" 或具体像素值，CSS 中对 height 的过渡规则会被内联样式覆盖。即使加 !important，也会干扰响应式计算（比如内容换行、字体缩放时高度突变），导致截断或留白。
用 max-height 替代 height 的实操要点
这是最常用且兼容性好的方案，但必须同时控制两个状态类，并预估足够大的最大高度：
-
.accordion-collapse.collapse.collapsing：设max-height: 0+overflow: hidden+transition: max-height 0.3s ease-in-out -
.accordion-collapse.collapse.show：设max-height: 500px（需大于面板内所有可能内容的实际高度，如含图片、多行文本、动态加载块） - 若内容高度差异大（比如 FAQ 项有的只有一行，有的带表格），建议设为
600px或更高；太小会突然截断，太大则收起动画变慢 - 别忘了移除 Bootstrap 原生 CSS 中对
height的transition，否则两者冲突造成卡顿
内容高度不可预估时，改用 transform: scaleY()
当内容由 CMS 动态注入、或含懒加载图片、或频繁增删 DOM 节点时，max-height 方案容易失准。此时推荐用缩放+透明度组合：
- 给
.accordion-collapse加transform-origin: top -
.collapsing状态：设transform: scaleY(0)+opacity: 0+transition: transform 0.25s ease, opacity 0.2s ease -
.show状态：设transform: scaleY(1)+opacity: 1 - 父容器（
.accordion-item）需保持overflow: visible，否则scaleY(0)会被裁剪
容易被忽略的配套细节
光改高度动画还不够，这三个地方不处理，用户会觉得“动效不完整”：
- 箭头图标旋转不同步：必须给
.accordion-button::after单独加transition: transform 0.2s，并在.collapsed类里写transform: rotate(-180deg) - 边框/间距在展开收缩时跳变：检查
.accordion-item是否有border-bottom，它在.collapsing阶段仍存在，建议用margin-bottom控制间距更可控 - 键盘焦点丢失：自定义动画不影响
tabindex和focus流，但若用了transform，部分旧版 Safari 可能不触发重排，建议在.show类里加will-change: transform提前提示渲染引擎
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
