CSS中不存在interpolate-size属性，它未被任何规范采纳，Chrome、Firefox、Safari均不支持；height: auto无法直接参与transition，因auto非可计算数值，需用scrollHeight+JS动态设置高度实现平滑过渡。
CSS 没有 interpolate-size 属性，这是个常见误解——它根本不存在于任何 CSS 规范中，也不会被浏览器识别。
为什么搜不到 interpolate-size？
这个名称可能是把 Web Animations API 的 interpolateSize（已废弃）或某些动画库的私有选项误记为 CSS 属性。CSS 标准里从无此属性，Chrome、Firefox、Safari 均不支持。直接写在样式表里会被忽略，开发者工具里也看不到生效。
height: auto 为什么不能直接过渡？
CSS 过渡（transition）要求起始值和结束值都必须是可计算的数值，而 auto 不是具体像素值，浏览器无法插值。所以写 transition: height 0.3s + height: auto 会导致过渡失效，元素瞬间展开/收起。
- ✅ 可过渡：
height: 0→height: 120px - ❌ 不可过渡：
height: 0→height: auto - ⚠️ 伪解决方案：
max-height过渡（但需预设足够大的上限值）
真正可用的 height 自适应过渡方案
绕过 height: auto 的限制，核心思路是让浏览器“知道”目标高度：
立即学习“前端免费学习笔记（深入）”；
- 用 JavaScript 读取元素
scrollHeight，再设置为height并触发过渡 - 过渡结束后清除内联
height，恢复height: auto（保持响应性） - 配合
overflow: hidden防止内容溢出 - 避免对
display: none元素读scrollHeight（返回 0），需先设为display: block且不可见（如opacity: 0; visibility: hidden）
简例（无框架）：
element.style.height = '0'; element.style.overflow = 'hidden'; element.offsetHeight; // 强制重排，确保样式生效 element.style.height = element.scrollHeight + 'px';
监听 transitionend 后设回 height: auto。
真正麻烦的地方不在写法，而在边界场景：元素内字体加载延迟、图片未加载完成、响应式断点切换时 scrollHeight 变化——这些都会导致高度计算偏小，过渡卡住或裁剪内容。
