Chrome 129+ 支持 interpolate-size: allow-keywords 实现 height: 0 → auto 平滑过渡，但 Safari/Firefox 至今不支持，须 fallback 到 max-height；该属性需设在父容器上，且仅生效于数值↔关键字过渡。
Chrome 129+ 可以用 interpolate-size: allow-keywords 实现 height: 0 → height: auto 平滑过渡，但 Safari 和 Firefox 截至 2026 年 9 月仍完全不支持，必须 fallback 到 max-height 方案。
interpolate-size 必须写在父容器上，不是目标元素本身
很多人把 interpolate-size: allow-keywords 直接加在要展开的 <div> 上，结果动画没反应——因为该属性是继承性属性，且只影响「子元素的内在尺寸计算」，对自身 <code>height: auto 无效。
正确做法是设在它的直接父级容器上：
.container {
interpolate-size: allow-keywords;
}
.box {
height: 0;
overflow: hidden;
transition: height .3s ease;
}
.box.expanded {
height: auto;
}
如果父容器是 或 :root，可以全局生效；但要注意：若中间有 flex、grid 等布局上下文，可能打断继承链，建议就近设在直接父级。
立即学习“前端免费学习笔记（深入）”；
三处容易漏掉，导致动画失效
即使父容器写了 interpolate-size: allow-keywords，动画仍可能跳帧或不触发。常见遗漏点：
-
height初始值必须显式声明为0（或具体数值），不能依赖默认的auto -
transition必须明确包含height，且时长建议 ≥.25s（.1s在 Chrome 下易跳帧） - 展开状态必须保留
height: auto作为兜底——老浏览器会忽略interpolate-size，只认这个
interpolate-size 只支持「数值 ↔ 关键字」，不支持关键字 ↔ 关键字
它不能让 auto → max-content 或 min-content → fit-content 动起来。必须有一端是数值或百分比：
- ✅
80px→auto - ✅
50%→max-content - ❌
auto→max-content
这意味着你无法用它实现「从一个内在尺寸平滑过渡到另一个内在尺寸」，比如 min-content → max-content。这种场景需改用 calc-size() 配合 clamp() 或 JS 测量。
别指望它替代 max-height 方案
interpolate-size 是个实验性增强，不是兼容性解决方案。目前仅 Chrome 129+ 支持，且行为不稳定（例如在某些 flex 容器嵌套下会失效）。生产环境必须提供 fallback：
- 用
max-height+overflow: hidden做主方案 - 用
@supports (interpolate-size: allow-keywords)包裹interpolate-size启用逻辑 - 避免在关键交互路径中强依赖它，尤其是需要支持 Safari/iOS 的项目
最麻烦的点在于：它不报错，也不警告，只是静默失效——你得靠真实设备测试才能确认是否真动起来了。
