height: auto 无法直接过渡，因它是关键字而非数值，浏览器无法插值；可用 max-height 模拟、transform: scaley() 或 js 测量后设固定 height 实现。
interpolate-size 不是标准 CSS 属性，也不存在于任何浏览器实现中。想用它实现 height: auto 过渡，这条路根本走不通。
为什么 height: auto 不能直接 transition？
CSS 的 transition 只能作用于可计算、可插值的数值型属性。而 height: auto 是一个关键字，浏览器无法提前知道它的像素值——它依赖内容、盒模型、字体渲染等运行时因素，没有确定的“起始值”和“结束值”，自然无法插值。
常见错误现象：transition: height 0.3s 写了但完全没动画；或者只在从固定值变到 auto 时卡住不动。
实际可用的替代方案（推荐优先级排序）
以下方法都已在现代浏览器中稳定支持，无需实验性 API：
-
用
max-height模拟：设一个足够大的max-height（如max-height: 500px），再对它做过渡。适用于内容高度可预估的场景，比如菜单、折叠面板。 -
用
transform: scaleY()：配合overflow: hidden，对元素做缩放。性能好、无重排，但会压缩子元素内容（文字变细、border 失真），慎用于含表单或复杂布局的区域。 -
用 JavaScript 测量 +
height过渡：先getBoundingClientRect().height获取真实高度，再设为内联style.height，触发过渡。适合动态内容，但要注意避免在测量前强制同步布局（如读取offsetHeight后立刻写style.height）。
别踩这些坑
常见翻车点：
- 把
height: auto和height: 0直接写进transition—— 浏览器不会自动“猜”中间值，只会跳变。 - 用
max-height时设太小（如100px），内容撑出后出现滚动条或截断；设太大（如9999px）会导致动画时间明显拖长（即使内容只有 20px 高）。 - 在 Flex/Grid 容器里对子项用
transform: scaleY()，可能破坏主轴对齐行为，尤其当父容器有align-items: center时。
真正要处理 height: auto 过渡，得接受“CSS 本身不支持”这个前提，然后选一个副作用最小、可预测性最强的绕行路径。最稳妥的仍是 JS 测量 + 固定 height 过渡，虽然多写几行，但逻辑清晰、兼容性好、表现可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
