答案：height动画跳跃因auto非数值无法渐变，可用max-height配合transition模拟平滑展开，通过设置足够大的max-height值并结合overflow:hidden实现视觉过渡，兼顾性能与兼容性，适用于多数折叠动画场景。
在CSS动画中，当需要对元素的 height 进行动画处理时，比如从 0 变为自动高度（auto），直接使用 height: auto 会导致动画“跳跃”或无法平滑过渡。这是因为 CSS 的 transition 不支持 height: auto 的渐变计算。解决这个问题的常用方法是：使用 max-height 配合 transition 来模拟高度变化，实现视觉上的平滑展开与收起。
为什么 height 动画会跳跃？
浏览器在执行 transition: height 0.3s 时，必须知道起始值和结束值的具体像素数。但 height: auto 是动态计算的，不是具体数值，因此无法参与渐变。这导致动画只能在固定值之间生效，一旦涉及 auto，就会直接跳到目标状态，失去过渡效果。
使用 max-height 实现伪“自动高度”过渡
虽然不能直接过渡到 height: auto，但可以利用 max-height 的特性来逼近这个效果：
- 将实际 height 设为
auto或留空（由内容撑开） - 用 max-height 控制最大可扩展高度，并对其添加 transition
- 通过改变 max-height 的值（如从 0 到一个足够大的值），实现展开/收起动画
示例代码：
立即学习“前端免费学习笔记（深入）”；
.expander {
overflow: hidden;
max-height: 0;
transition: max-height 0.3s ease-out;
}
<p>.expander.open {
max-height: 500px; /<em> 要大于内容实际高度 </em>/
}</p>点击触发 .open 类时，max-height 从 0 过渡到 500px，内容逐渐显示。只要设置的 max-height 足够大，就能容纳各种内容高度。
优化技巧与注意事项
这种方法虽有效，但也有一些细节需要注意，避免出现新问题：
- max-height 值要合理：设得太小会截断内容，太大可能影响动画流畅性（尤其是移动端）。建议根据内容常见高度设定，例如 200px~600px
- 配合 overflow: hidden：确保超出部分被隐藏，否则收起时内容仍可见
- 避免 inline 元素影响布局：内部尽量使用块级元素，防止换行异常
- JavaScript 动态控制更精准：若需真正响应式动画，可用 JS 先设置 height 为 'auto'，再读取 offsetHeight，最后用 transition 过渡到该像素值
进阶方案：JS 计算真实高度实现真正 smooth 过渡
如果对动画精度要求高，可以结合 JavaScript 动态获取内容高度：
function toggle(element) {
if (element.style.maxHeight) {
element.style.maxHeight = null;
} else {
element.style.maxHeight = element.scrollHeight + "px";
}
}
配合 CSS：
.animated-box {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
这样每次都能准确过渡到实际所需高度，兼顾灵活性与流畅性。
基本上就这些。用 max-height + transition 是最简单有效的替代方案，适合大多数折叠面板、下拉菜单等场景。虽然不是完美等同于 height: auto 的过渡，但在视觉体验上足够自然。不复杂但容易忽略。
