height: 0 → height: auto 无法过渡，因auto无具体像素值；常用解法是用max-height替代并配合overflow: hidden；更可靠方案为clip-path或transform: scaleY()；动态内容可借助JavaScript读取scrollHeight实现。
为什么 height: 0 → height: auto 直接过渡无效
CSS 的 transition 无法在 height: 0 和 height: auto 之间插值计算——浏览器不知道 auto 对应的具体像素值，也就没法生成中间帧。直接写 transition: height 0.3s 会看到“瞬间展开/收起”，毫无动画效果。
用 max-height 替代 height 是最常用解法
把 height: auto 换成一个足够大的固定值（比如 max-height: 500px），再配合 overflow: hidden，就能让过渡生效。前提是内容高度不超过设定的 max-height 上限。
- 展开时：从
max-height: 0→max-height: 500px - 收起时：从
max-height: 500px→max-height: 0 - 必须加
overflow: hidden，否则超出部分仍可见 -
500px要略大于内容实际最大高度；设太小会截断，太大则动画时间变长（因要过渡更长距离）
details {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
details.open {
max-height: 500px;
}
更可靠的方案：用 clip-path 或 transform: scaleY()
当内容高度差异大、或无法预估最大高度时，max-height 容易出问题。这时推荐用视觉裁剪类属性，它们支持 auto 值且过渡稳定。
-
clip-path: inset(0 0 100% 0)→clip-path: inset(0)：从完全遮盖到底部展开，兼容性较好（Chrome 55+/Firefox 54+/Safari 15.4+） -
transform: scaleY(0)→transform: scaleY(1)：需配合transform-origin: top，避免缩放中心偏移；注意子元素若有绝对定位，可能需要重置transform - 两者都无需预设尺寸，也不依赖
overflow: hidden（但clip-path本身就有裁剪效果）
JavaScript 辅助获取真实高度（适合动态内容）
如果 DOM 高度完全不可控（比如服务端渲染后 JS 才加载、内容异步插入），就得靠 JS 先读取 scrollHeight，再设为 height 过渡：
立即学习“前端免费学习笔记（深入）”；
- 展开前：先将
height设为0，overflow设为hidden - 触发后：用
offsetHeight或scrollHeight获取目标高度，再设为height值 - 收起时：用
getComputedStyle读当前height，再过渡回0 - 注意：设
height后需强制重排（如读一次offsetHeight），否则浏览器可能合并样式操作导致动画不触发
这种方案灵活但多了 JS 介入，多数静态/半静态场景优先选 max-height 或 clip-path。
真正麻烦的是混合了 flex / grid 布局、或者内部有 margin collapse 的容器——此时 scrollHeight 可能不准，max-height 上限更难估。得具体看结构，别无捷径。
