用 transform: scaley() 替代 height 过渡可彻底解决 bootstrap collapse 抖动，因其避免重排、兼容 auto 高度且性能更优，只需覆盖 css 并注意 overflow、transform-origin 等细节。
直接改用 transform: scaleY() 替代 height 过渡，是解决 Bootstrap Collapse 高度抖动最有效、改动最小的方案。Bootstrap 原生的 .collapse 依赖 height: 0 → auto，而 auto 无法参与 CSS transition，浏览器只能“硬切”，必然抖动。
为什么 height 过渡一定会抖动
根本不是 JS 控制慢，而是 CSS 层面的限制：height: auto 没有可插值的数值，transition 只能在两个确定数值间渐变（比如 height: 0 → height: 200px）。但 Collapse 的目标高度是动态计算的，JS 先读取 scrollHeight 再设死 height，这个过程存在微小延迟，且在 resize 或字体加载后可能失效；更关键的是，height 变化会触发重排（reflow），代价远高于仅重绘（repaint）。
-
height动画中若父容器无明确max-height，浏览器可能反复回流以测量内容 - 含
padding、border或line-height变化的子元素，会让scrollHeight计算结果不稳定 - 移动端 WebKit 引擎对
height过渡的优化极差，常出现首帧卡顿或跳帧
用 transform 替换的实操要点
不改 JS，只覆盖 CSS 即可生效。关键是把动画锚点从尺寸控制转移到视觉缩放，并堵住常见漏点：
- 给 Collapse 容器加
overflow: hidden和transform-origin: top left，避免scaleY(0)时内容错位 - 移除所有原生
.collapse、.collapsing中涉及height和overflow的 transition 声明，否则会和transform冲突 - 确保 Collapse 根元素（如
<div class="collapse">）没有 <code>margin或padding，否则scaleY(0)后仍占空白空间 - 如果内部有
button或input，需额外加pointer-events: none到.collapsing状态，防止缩放过程中误触
示例最小可用 CSS：
.collapse {
overflow: hidden;
transform-origin: top left;
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.collapse.collapsing {
transform: scaleY(0);
}
.collapse.show {
transform: scaleY(1);
}
collapse-horizontal 水平抖动要单独处理
collapse-horizontal 抖动和垂直 Collapse 不是一回事：它本质是 width 过渡，但受 padding、border、box-sizing 和 flex 布局干扰严重。尤其当它嵌套在 .col-auto 里时，width 计算完全不可控。
- 把
padding、border全部移到外层容器（如.col-auto），Collapse 内部元素必须是display: block或inline-block，禁用flex相关类 - 显式设置
box-sizing: border-box到 Collapse 根元素，否则width过渡值不包含 padding/border，视觉跳变 - 避免用
.show类直接控制宽度，改用 JS 注入内联style="width: XXpx"并配合transition，比 class 切换更可靠 - iOS Safari 下，若 collapse-horizontal 内容含
position: absolute元素，需加will-change: transform到根元素，否则缩放帧率掉到 30fps 以下
真正难的不是写对 transform，而是确认所有参与动画的节点都已剥离 layout-sensitive 样式——任何残留的 margin、未重置的 flex、或没加 will-change 的硬件加速提示，都会让平滑变成幻觉。
