height过渡无效主因是auto值无法计算终点；常用max-height替代，设合理固定值（如500px）并配合overflow:hidden；transform:scaleY()更流畅但需处理基准点；JS方案需requestAnimationFrame强制重排获取真实高度。
height 过渡不起作用的常见原因
直接给 height 加 transition 通常无效，因为当高度是 auto 时，浏览器无法计算过渡的终点值。哪怕你写了 transition: height 0.3s ease;，只要初始或目标值之一是 auto，动画就会直接跳变。
- 不能对
height: auto做过渡 —— 浏览器不知道“auto”具体是多少像素 -
max-height可以过渡，且常被用作height: auto的替代方案 - 使用
transform: scaleY()或opacity配合overflow: hidden是更轻量的动效方案
用 max-height 实现平滑展开收起
这是最常用、兼容性好、无需 JS 的方案。关键是把 max-height 设为一个明显大于内容实际高度的固定值（但不能过大，否则动画时间失真）。
/* 展开状态 */
.collapsible {
max-height: 500px;
overflow: hidden;
transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
<p>/<em> 收起状态 </em>/
.collapsible.closed {
max-height: 0;
padding-top: 0;
padding-bottom: 0;
}- 选
500px是为了覆盖绝大多数内容；若内容超长，可改用600px或100vh（注意100vh在 Safari 中可能触发回弹） - 避免用
max-height: 10000px—— 过大的值会让过渡看起来“先快后慢”，失去缓动感 - 记得同步控制
padding和margin，否则收起时留白会突兀
用 transform + overflow 实现更流畅的折叠动画
比 max-height 更精准、性能更好，尤其适合频繁切换的组件。原理是缩放元素本身，同时用 overflow: hidden 截断溢出部分。
.collapsible-transform {
overflow: hidden;
transition: transform 0.3s ease-out, opacity 0.2s ease-out;
}
<p>.collapsible-transform.closed {
transform: scaleY(0);
opacity: 0;
}-
transform触发 GPU 加速，动画更顺滑，尤其在低端设备上 - 必须加
overflow: hidden，否则缩放时内容会溢出容器 -
scaleY(0)会让元素视觉消失，但 DOM 仍占位（高度为 0），需配合opacity消除残留感 - 注意：如果子元素有
transform或position: absolute，可能影响缩放基准点，建议加transform-origin: top
JavaScript 配合 getComputedStyle 动态过渡 height
如果你非得用真实 height（比如要精确控制布局、或需要事件监听高度变化），就得靠 JS 先读取目标高度再设过渡。
立即学习“前端免费学习笔记（深入）”；
function animateHeight(el, isOpen) {
if (isOpen) {
el.style.height = 'auto';
const height = getComputedStyle(el).height;
el.style.height = '0';
requestAnimationFrame(() => {
el.style.height = height;
});
} else {
el.style.height = getComputedStyle(el).height;
requestAnimationFrame(() => {
el.style.height = '0';
});
}
}- 核心是两次
requestAnimationFrame：第一次强制重排获取真实高度，第二次触发过渡 - 必须在设
height: auto后立刻读取getComputedStyle(el).height，否则拿不到数值 - 别忘了给元素预设
transition: height 0.3s ease; - 这个方案在 SSR 或初始隐藏内容中容易出错，需确保元素已渲染且尺寸可读
CSS 高度过渡看似简单，真正难的是边界情况：内容动态加载、字体加载延迟、行高变化、多层嵌套下的 overflow 传递。用 max-height 最省心，用 transform 最稳，JS 方案最灵活但也最容易漏掉重排时机。
