Bootstrap Collapse 的 height 过渡根本不会生效，因其内部使用 display: block/none 切换而非 height 动画；正确方案是用 max-height + opacity 替代，配合 .collapse.show 类控制，避免直接操作 height。
为什么 height 过渡在 Bootstrap Collapse 中根本不会生效
因为 Bootstrap 的原生 Collapse 组件**完全不依赖 height 过渡**。它内部用的是 display: block/none + .show 类切换，而 height 属性本身不可动画——哪怕你写了 transition: height 0.3s，浏览器也只会瞬间跳变，不会平滑过渡。
常见错误现象：
- 手动给
.collapse加了height: 0和height: auto，结果展开时“啪”一下弹出来 - 开发者工具里看到
height值在 DOM 上没变化，或始终是auto - 控制台无报错，但动画就是卡顿、跳帧、收不干净
根本原因：Bootstrap JS 在展开时直接写内联 style="display: block"，收起时写 style="display: none"，height 根本没被读取或设置。
想加平滑动画？必须绕过 height，改用 max-height + opacity
这是目前最稳定、兼容性最好、且不破坏 Bootstrap JS 行为的方案。关键不是“修 Collapse”，而是“盖住它”的视觉表现。
立即学习“前端免费学习笔记（深入）”；
实操要点：
- 保留 Bootstrap 的
data-bs-toggle="collapse"和.collapse类，让它照常控制.show类和aria-expanded - 对目标元素（比如
#myCollapse）单独加样式，覆盖默认行为：.collapse { opacity: 0; max-height: 0; overflow: hidden; transition: max-height 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease-out; } .collapse.show { opacity: 1; max-height: 50rem; /* 不要用 auto，也不建议 px，rem 更安全 */ } - 确保父容器没有
overflow: visible或clip-path，否则会截断max-height动画
为什么 max-height 值写 50rem 而不是 300px
因为 max-height 过渡需要一个「确定的终点值」，而 auto 不可动画。写死 300px 极易出问题：
- 内容超出就溢出，破坏布局
- 字体缩放后高度失配（尤其在 macOS 或高 DPI 屏幕）
- JS 动态插入内容后，新高度 > 300px，动画直接跳变
50rem 是更鲁棒的选择——它基于根字体大小，随用户缩放自适应，且足够大（通常 ≈ 800px），几乎不会被撑破。如果内容极长（比如含大量富文本），可升到 80rem，但别盲目堆大，否则动画收尾会拖沓。
真正丝滑的关键：避免触发布局计算
即使用了 max-height，仍可能卡顿。根源在于每次 max-height 变化都会触发重排（reflow）。要缓解：
- 给折叠容器加
will-change: max-height，但**只在展开前一刻用 JS 动态添加**，收起后立刻移除，避免长期开销 - 确保折叠区域内部没有频繁重排的元素（如未设宽高的图片、未限制
white-space的长文本） - 移动端慎用
max-height：WebKit 对它的优化差，若发现白屏或闪烁，直接切到transform: scaleY(0)+opacity方案
最易被忽略的一点：所有这些动画都建立在「Bootstrap JS 正常工作」的前提下。一旦你写了 .collapse { display: none !important } 或媒体查询里锁死了 display，那连 .show 类都不会被加，后续所有 CSS 动画都无从谈起——先打开开发者工具的「Computed」面板，确认 .show 类确实存在，再调样式。
