collapse高度动画不平滑的根本原因是max-height起止值不匹配，应设为120vh并统一.collapse、.collapsing的transition，避免手动固定值或依赖height:auto；用transform:scaley替代height更稳定。
为什么 collapse 展开后高度突然截断或留白
根本不是动画没跑完，而是 max-height 的起止值不匹配：收起态是 max-height: 0，但展开态若设得太小（比如 300px），浏览器插值到一半就卡住；设得太大又可能撑开布局。Bootstrap 默认用固定估算值（如 1000px），但实际内容高度受字体加载、图片异步渲染、padding 等影响，首次计算常偏小。
- 检查是否手动写了
.navbar-collapse { max-height: 300px }—— 删掉它，改用足够大的视口单位 - 移动端下
.dropdown-menu是position: absolute，不参与高度计算，但视觉上会“顶高”容器，需在.navbar-collapse.show上加padding-bottom: 48px预留空间 - 若用了自定义图标或 Web Font，首屏加载延迟会导致 JS 读取
scrollHeight偏小，可临时加transition: none排查
如何让 collapse 高度过渡真正平滑
关键不在“调快慢”，而在确保过渡全程由同一组 CSS 属性驱动，且 JS 状态与样式类严格同步。Bootstrap 的 .collapsing 类是过渡桥梁，但它只存在几十毫秒，容易被忽略。
- 必须覆盖
.collapse, .collapsing的transition，不能只写.collapse.show—— 后者只在静止态存在，不参与“从 0 到 auto”的起点动画 - 推荐写法：
.collapse, .collapsing { transition: max-height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; } -
max-height终值建议用120vh而非none或fit-content，前者可过渡，后者直接禁用动画
collapse 动画结束后内容错位或高度残留
典型表现是收起后 DOM 上还挂着 style="height: 217px"，或者展开后文字换行异常。这不是 JS 没清状态，而是 CSS 过渡被提前中断——.collapsing 类被 JS 移除太快，浏览器来不及完成插值。
- 不要依赖
shown.bs.collapse事件去手动重置height，它触发时动画可能已中断 - 确保父容器没有
overflow: hidden或transform，它们会创建新层叠上下文，干扰 height 计算 - 如果内容含图片，用
img { display: block; }避免基线对齐导致的额外高度
想彻底绕过 height 动画用 transform 怎么做
直接改 height 是最不稳定的方案，因为 height: auto 不可过渡。用 transform: scaleY() 是更可控的选择，但必须切断 Bootstrap 对 height 的内联控制。
- 先加
.collapse { height: auto !important; overflow: hidden; } - 再定义缩放：
.collapse:not(.show) { transform: scaleY(0); transform-origin: top; }和.collapse.show { transform: scaleY(1); } - 最后补过渡：
.collapse { transition: transform 0.35s ease-in-out, opacity 0.2s ease-in; } - 注意：此时父容器可能塌陷，需给
.collapse的直接父级加min-height: 48px防跳动
.collapsing 类的存在时机和 max-height 终值的保守性——宁可多留 20vh，也不要少算一行文字的高度。
