直接使用 height: 0 到 height: auto 无法实现过渡动画，因浏览器不能对 auto 值进行插值计算，导致动画失效或跳变；正确做法是通过 JavaScript 获取元素 scrollHeight，结合 @keyframes 定义从 0 到具体像素值的高度动画，并用 overflow: hidden 配合实现平滑展开收起，或采用 max-height 折中方案提升灵活性。
子元素在做折叠展开动画时，如果直接使用 height: 0 到 height: auto 的过渡，会发现动画不生效或不自然，因为 CSS 无法对 height: auto 做渐变插值。使用 animation 配合 @keyframes 是一种更可控的解决方案，但关键在于如何让高度变化平滑。
问题原因：height 不能从 0 过渡到 auto
很多开发者尝试这样写：
/* ❌ 不起作用 */transition: height 0.3s ease;
当目标高度是 auto 时，浏览器无法计算中间帧，导致动画瞬间跳变或完全失效。
解决方案：用 animation + 固定高度关键帧
使用 @keyframes 明确定义从 0px 到具体像素值的动画过程，可以实现流畅的展开收起效果。
立即学习“前端免费学习笔记（深入）”；
步骤如下：
- 先测量内容实际高度（可用 JavaScript）
- 动态设置
animation中的关键帧高度 - 使用
overflow: hidden隐藏溢出内容
示例代码：
.element {
overflow: hidden;
animation: slideDown 0.3s ease forwards;
}
@keyframes slideDown {
from { height: 0; }
to { height: 200px; } / 替换为实际内容高度 /
}
@keyframes slideUp {
from { height: 200px; }
to { height: 0; }
}
JavaScript 动态控制：
const el = document.querySelector('.content');
const height = el.scrollHeight + 'px'; // 获取真实高度
el.style.height = '0';
el.style.overflow = 'hidden';
// 展开
el.style.animation = 'none';
setTimeout(() => {
el.style.animation = slideDown 0.3s ease forwards;
el.style.height = height;
}, 10);
// 收起
el.style.animation = slideUp 0.3s ease forwards;
优化体验：避免重复写死高度
可以通过 JS 动态生成 @keyframes 或直接使用 max-height 折中方案：
- 设置一个足够大的
max-height（如max-height: 500px） - 配合
transition: max-height 0.3s ease - 虽然不够精确，但在多数场景下足够平滑
推荐在内容高度相对固定时使用 animation + 精确 height，在高度多变时使用 max-height 技巧。
基本上就这些，关键是绕过 auto 带来的插值难题。
