height: auto 无法直接过渡，应改用 max-height 实现“伪 auto”动画；若高度不可预估，则需 JS 动态获取 scrollHeight 并设置精确 height 值。
transition 无法直接作用于 height: auto
这是最常踩的坑：给 height: auto 加 transition 完全无效，浏览器不支持对 auto 值做插值计算。哪怕你写了 transition: height 0.3s ease，展开时也会瞬间跳变。
常见错误场景包括下拉菜单、折叠面板、动态内容卡片——它们的内容高度不确定，但又想实现平滑展开。
- 不要写
height: auto+transition - 避免用
display: none/block切换，它无法过渡 - 慎用
visibility: hidden/visible单独控制，它不占布局空间也不触发重排
用 max-height 替代 height 实现“伪 auto”过渡
这是最轻量、兼容性最好的方案：把 height 改为 max-height，并设一个足够大的安全上限（比如 max-height: 500px），再配合 overflow: hidden 隐藏溢出内容。
只要这个上限大于实际内容高度，视觉效果就和 height: auto 一致，且能被 transition 正确驱动。
立即学习“前端免费学习笔记（深入）”；
div.collapsible {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-in-out;
}
<p>div.collapsible.open {
max-height: 500px; /<em> 确保大于可能的最大内容高度 </em>/
}注意点：
-
max-height的初始值不能是0如果内容有 padding/margin，需预留空间或用opacity配合 - 如果内容高度可能超过 500px，这个值就要调大，否则会截断
- IE10+ 支持，无需额外 polyfill
JavaScript 配合 getComputedStyle 获取真实高度
当内容高度差异极大、无法预估 max-height 上限时，就得靠 JS 动态读取并设置精确的 height 值。
核心思路是：先强制展开（height: auto），读取 offsetHeight，再设回具体像素值，最后加过渡。
function toggleHeight(el) {
const isOpen = el.style.height !== '';
if (isOpen) {
el.style.transition = 'none';
el.style.height = el.scrollHeight + 'px';
requestAnimationFrame(() => {
el.style.transition = 'height 0.3s ease-in-out';
el.style.height = '0';
});
} else {
el.style.height = '0';
el.style.transition = 'height 0.3s ease-in-out';
requestAnimationFrame(() => {
el.style.height = el.scrollHeight + 'px';
});
}
}关键细节：
- 必须用
requestAnimationFrame强制触发重排，否则读不到新尺寸 - 关闭时先关掉 transition 再设 height，避免反向动画卡顿
-
scrollHeight包含 padding，比offsetHeight更可靠
transform: scaleY(0) 不适合宽高独立变化
有人尝试用 transform: scaleY(0) 模拟高度收缩，但它本质是缩放，会导致子元素文字/边框一同压缩变形，且无法单独控制宽度变化。
如果你需要同时过渡 width 和 height，又不想用 JS，唯一稳妥路径仍是 max-width + max-height 组合，但要分别设置合理上限，并注意两者过渡时间保持一致。
真正难处理的不是“怎么动”，而是“动完后布局是否稳定”——比如父容器高度是否随子元素变化重新计算，这往往需要配合 will-change: height 或 contain: layout 来优化重排性能，但这些只在复杂列表或高频切换场景才值得介入。
