Chrome 129+ 支持 interpolate-size: allow-keywords 实现 height: 0 → auto 平滑过渡，Safari 和 Firefox 截至2026年5月仍不支持，需 fallback 到 max-height 方案。
Chrome 129+ 可直接用 interpolate-size: allow-keywords 实现 height: 0 → height: auto 平滑过渡，但 Safari 和 Firefox 当前（2026年5月）仍不支持该属性，必须降级 fallback。
为什么 interpolate-size: allow-keywords 能起作用
浏览器默认只对数值型长度做插值（numeric-only），auto 是关键字，被跳过动画。启用 allow-keywords 后，只要一端是数值（如 0）、另一端是关键字（如 auto），引擎就会在运行时把 auto 解析为实际像素值，并逐帧插值——本质是“动态求值 + 数值过渡”。
注意：它不解决 auto → max-content 这类纯关键字互转，也不修复 display: none 切换；只对 transition 中涉及的单个可动画属性生效。
必须加的三步配置（缺一不可）
仅写 :root { interpolate-size: allow-keywords; } 不够，常见漏项如下：
立即学习“前端免费学习笔记（深入）”；
-
height必须显式声明初始值（如height: 0），不能依赖height: auto的默认行为 -
transition必须包含height，且时间不能太短（.1s在 Chrome 下易跳帧，推荐.25s–.35s） - 必须保留
height: auto作为 hover/active 状态的兜底（旧版浏览器会忽略calc-size()或interpolate-size，直接走 fallback）
正确写法示例：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
div {
height: 0;
overflow: hidden;
transition: height .3s ease;
}
div.expanded {
height: auto;
height: calc-size(auto); /* Chrome 127+ 实验开启或 129+ 默认 */
}Safari / Firefox 用户必须 fallback 到 max-height
截至 2026 年 5 月，Safari 最新版（16.6）仍不支持 interpolate-size，Firefox 也未实现。此时若只靠 interpolate-size，动画在这些浏览器里会退化为“瞬间展开”，毫无过渡。
安全做法是双轨并行：
- 用
max-height做主兼容方案（设一个足够大的值，如max-height: 500px） - 同时保留
height+interpolate-size供新 Chrome 使用（现代浏览器优先取height，老浏览器回退到max-height） - 避免用
9999px这类过大值——会导致长内容展开时动画明显拖尾；建议按内容最大预期高度设（如 FAQ 项通常 ≤ 300px）
关键细节：max-height 必须配合 overflow: hidden，否则裁剪失效；且初始状态要设 max-height: 0，不是 none。
容易被忽略的布局陷阱
即使动画跑起来了，也可能视觉错位。常见原因：
- 内部有
position: absolute元素：它们脱离文档流，auto高度不计入，导致calc-size(auto)计算偏小 - 父容器用了
grid或flex，且子项没设align-self: start：展开时可能上下浮动，看起来像“抖动” - 字体加载延迟（如自定义 Web Font）：
auto高度在字体加载前计算，造成展开后突然增高
最稳妥的应对是：对含绝对定位的内容，改用 max-height 方案；对字体敏感场景，监听 fontload 后再触发展开类。
