CSS interpolate-size 怎么让 height:auto 平滑展开：折叠面板、降级与可访问性验收

折叠面板最容易暴露一个老问题：收起状态的高度可以写成 0，展开状态却通常是 auto。直接给 height 加 transition，浏览器往往只能在两个离散状态之间切换，结果就是内容突然出现，或者先闪出一块空白。CSS 新增的 interpolate-size: allow-keywords 给了这类过渡一个明确的接入开关。

先复现：height:auto 为什么会突然跳变

下面是一段很常见的 FAQ 折叠面板代码。按钮改变 aria-expanded，面板通过类名切换高度：

  为什么动画没有生效？


  
这里的回答长度可能随数据变化。

.faq-panel {
  height: 0;
  overflow: hidden;
  transition: height 240ms ease;
}

.faq-panel.is-open {
  height: auto;
}

问题不在 240ms，而在于 0px 是可计算的固定长度，auto 是自适应尺寸关键字。默认的 interpolate-size: numeric-only 不会把这两类值混在一起计算，所以展开时常见的表现是直接跳到最终高度，看不到中间的过渡过程。

用 interpolate-size 打开长度到自适应尺寸的过渡

把下面这条声明放在组件容器上，或者放在 :root 上让它继承到整页所有元素：

:root {
  interpolate-size: allow-keywords;
}

.faq-panel {
  height: 0;
  overflow: hidden;
  transition: height 240ms ease;
}

.faq-panel.is-open {
  height: auto;
}

这里有三个明确的职责：interpolate-size 允许自适应关键字参与过渡值计算，height 定义闭合和展开的两个端点，overflow 让折叠过程不会把内容提前露出来。属性是继承的，因此页面级全局开关配置起来很方便；如果只想让某个 FAQ 区域使用新行为，把声明放到对应区域的 .faq-list 会更稳妥。

height:auto 和 max-content 怎么选

对普通文案面板，auto 最直观，会按正常文档流布局计算高度。内容需要尽量按自身最大内容尺寸展开时，可以使用 max-content，但长单词、超长 URL 或固定宽度容器可能带来横向溢出，不能只看动画是否流畅就直接选用。

把可访问性和降级逻辑一起接上

动画开关不能代替基础状态管理。按钮仍然要同步 aria-expanded，面板用 aria-hidden 或合适的可聚焦策略避免屏幕阅读器和键盘用户读到隐藏内容。一个最小的状态切换可以这样写：

const toggle = document.querySelector('.faq-toggle');
const panel = document.querySelector('#faq-panel');

toggle.addEventListener('click', () => {
  const open = toggle.getAttribute('aria-expanded') === 'true';
  toggle.setAttribute('aria-expanded', String(!open));
  panel.classList.toggle('is-open', !open);
  panel.hidden = false;
});

生产页面还要处理关闭后的焦点顺序、多个面板互斥时的状态同步，以及动态内容改变后的高度适配。尤其是图片未加载完成时，展开高度可能继续变化；这不是 interpolate-size 失效，而是内容尺寸本身还没有稳定下来。

为 prefers-reduced-motion 留出无动画路径

@media (prefers-reduced-motion: reduce) {
  .faq-panel {
    transition: none;
  }
}

开启减少动画偏好的用户仍应看到完全相同的内容和状态，只是去掉时间上的运动效果。这样测试时也可以在 DevTools 的渲染设置中切换 prefers-reduced-motion，确认打开、关闭和键盘操作都不依赖动画结束事件。

发布前检查：不要把增强特性当成内容访问门槛

• 新浏览器：打开 DevTools，确认 interpolate-size: allow-keywords 生效，面板从 0 到 auto 连续顺滑展开。
• 旧浏览器：即使没有平滑动画，点击后内容也必须可见，按钮的 aria-expanded 必须正确同步状态。
• 动态内容：追加一段长文本、加载一张图片后再次打开，检查是否出现裁剪错位或溢出。
• 用户偏好：开启减少动态效果后，面板仍能立即完成状态切换，没有卡顿延迟。
• 布局边界：检查嵌套滚动容器、max-height、固定高度父元素和长 URL 的表现。

如果业务必须覆盖大量旧浏览器，可以保留 JavaScript 读取 scrollHeight 的兜底方案，但先保证无脚本或不支持新属性时的内容路径完全可用。新属性适合减少冗余胶水代码，不适合把“能不能看到答案”交给兼容性。

常见问题

interpolate-size 能让 auto 和 auto 之间也平滑过渡吗？

不能简单这样理解。它主要解决长度/百分比值与自适应尺寸关键字之间的插值；两个自适应关键字之间仍可能无法插值。

必须把 interpolate-size 写在 :root 吗？

不必须。它会继承，可以写在页面根节点，也可以只写在 FAQ 容器上缩小影响范围，避免改动其他组件的默认行为。

为什么加了属性还是没有动画？

先检查是否处于不支持该属性的浏览器、是否被 prefers-reduced-motion 样式关闭、过渡属性是否真的包含 height，以及展开端是否仍是两个无法插值的关键字。

用 max-height:9999px 还能不能做折叠动画？

可以作为旧环境兜底方案，但最大高度是人为设定的上限，动画时长和实际内容高度不匹配也会产生不自然的速度变化。能使用新能力时，优先让实际内容高度参与过渡，并保留无动画降级路径。

结尾：动画是增强，状态才是核心功能

interpolate-size: allow-keywords 把折叠面板从“长度值对长度值”的限制里解放出来，但它只解决尺寸插值问题。面板是否可见、按钮是否报出正确状态、旧浏览器是否能打开内容，仍要由 HTML 原生状态和降级路径保证。按这条边界验收，动画顺滑与功能可靠就不会互相绑架。