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 的限制，核心思路是让浏览器“知道”目标高度：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 用 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 变化——这些都会导致高度计算偏小，过渡卡住或裁剪内容。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！