CSS transition 不支持 height: auto 因其无法插值，需用 max-height 模拟或 JS 动态测量真实高度实现过渡，二者协作时须避免样式冲突与状态错乱。
height: auto 无法直接过渡的底层原因
CSS 的 transition 不支持 height: auto，因为浏览器无法在动画起始/结束帧之间计算“自动高度”的数值——auto 不是具体像素值，没有可插值的中间状态。强行写 transition: height 0.3s 会静默失效，连第一帧都不动。
常见错误现象包括：元素突然展开/收起、动画卡在 0px、控制台无报错但视觉无过渡。
真正能过渡的只有明确数值（如 height: 200px）或可计算单位（max-height、transform、opacity 等）。
用 max-height 模拟 height: auto 过渡（SCSS 封装方案）
这是最轻量、无需 JS 的方案，核心是用足够大的 max-height 替代 height，并确保它远超内容实际高度，让过渡“看起来像自动”。SCSS 可抽象为可复用的 mixin：
立即学习“Java免费学习笔记（深入）”；
@mixin collapse-transition($duration: 0.3s, $easing: ease-in-out) {
overflow: hidden;
transition: max-height $duration $easing, padding-top $duration $easing, padding-bottom $duration $easing;
&.is-open {
max-height: 500px; // 需大于可能的最大内容高度
}
&.is-closed {
max-height: 0;
padding-top: 0;
padding-bottom: 0;
}
}
使用时注意：
-
max-height值不能太小（否则内容被截），也不宜过大（影响动画精度和性能；超过 1000px 后人眼已难分辨差异） - 必须显式设置
overflow: hidden，否则内容会溢出 - 若内容含内边距，建议一并过渡
padding-top/padding-bottom，避免“拉伸感” - 不适用于高度频繁剧烈变化的场景（如富文本动态加载），因固定
max-height易失效
JavaScript 精确控制真实 height 过渡（ResizeObserver + requestAnimationFrame）
当内容高度不可预估、且要求严格平滑（比如折叠面板含图片或异步加载内容），就得用 JS 测量真实高度并手动驱动过渡。关键不是硬编码 height，而是用 getBoundingClientRect().height 动态读取：
function animateHeight(el, isOpen) {
if (isOpen) {
el.style.height = '0';
el.style.overflow = 'hidden';
el.offsetHeight; // 强制重排，确保 height=0 生效
const targetHeight = el.scrollHeight;
el.style.height = `${targetHeight}px`;
} else {
el.style.height = `${el.scrollHeight}px`;
el.offsetHeight;
el.style.height = '0';
}
}
更健壮的做法结合 ResizeObserver 监听内容变化，并用 requestAnimationFrame 避免布局抖动：
- 首次展开前先设
height: 0+overflow: hidden，再触发重排读取scrollHeight - 过渡结束后务必清除
height行内样式（设为''），否则后续 SCSS 或其他逻辑可能冲突 - 若元素有 border/padding/margin，
scrollHeight不包含它们，需额外计算；此时改用getBoundingClientRect().height更稳妥 - 不要在
transitionend中直接移除height，应加setTimeout(..., 0)或requestAnimationFrame延迟清理，防止样式未完全应用就被清除
SCSS 与 JS 协作时最容易忽略的边界问题
混合方案里，样式层（SCSS）和行为层（JS）容易互相覆盖，导致过渡中断或错乱。典型坑点：
- SCSS 定义了
.is-open { max-height: 500px; }，但 JS 同时设置了el.style.height = '240px'—— 行内样式优先级更高，SCSS 规则被绕过 - JS 动画执行中，用户快速连续点击触发多次
animateHeight()，造成height值反复覆盖，出现“抽搐”效果 - 响应式场景下，窗口缩放导致内容高度变化，但
max-height固定值未更新，收起后留白或溢出 - 服务端渲染（SSR）页面初始状态为展开，但 JS 还未执行，SCSS 的
.is-open类已生效，而max-height: 500px又没被 JS 覆盖，动画从 500px → 0 开始，明显不自然
真实项目里，复杂交互往往需要 JS 主导高度计算，SCSS 仅负责过渡参数和基础状态类；把“自动”这件事彻底交给 JS，比用 max-height 折中更可控。
