Web 端展开/收起面板方案总结

Web 端展开/收起怎么写才不卡？6 种方案一次讲透

展开/收起面板谁都写过，但真要「动画顺滑 + 兼容性好 + 代码少」，里面门道不少。核心难点就一句：CSS 里 height: auto 是不能直接做过渡动画的。下面把能用的方案按推荐度排个序。

当前首选：grid-template-rows

这是我现在默认用的。利用 Grid 在 0fr 和 1fr 之间过渡，浏览器自动算内容高度，不用你预设。

.ai-audit-content {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.3s ease;
}
.ai-audit-content.collapsed { grid-template-rows: 0fr; }
.ai-audit-content-inner { overflow: hidden; }

代码少、动画精确、现代浏览器全覆盖（Chrome 84+ / Firefox 66+ / Safari 14+）。

老项目保底：max-height

.ai-audit-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.ai-audit-content.expanded { max-height: 1000px; } /* 要大于真实高度 */

兼容性极好（IE10+），但缺点明显：展开时空转一段、收起时提前结束，时序不精确。只在要兼容老 IE 时才用。

纯视觉动画：transform: scaleY()

.ai-audit-content { transform-origin: top; transform: scaleY(1); transition: transform 0.3s ease; }
.ai-audit-content.collapsed { transform: scaleY(0); opacity: 0; }

GPU 加速、性能极佳（IE9+），但它不改变布局高度，下方内容可能跳动或被遮挡，只适合「只要视觉动画、不动文档流」的场景。

未来终局：interpolate-size + height: auto

CSS 工作组正式给的解法，允许对 auto 高度插值：

:root { interpolate-size: allow-keywords; }
.ai-audit-content { height: 0; overflow: hidden; transition: height 0.3s ease; }
.ai-audit-content.expanded { height: auto; }

语法最直观，但目前极新（Chrome 133+ / Safari 18.2+），旧浏览器还跑不了。配套还有 calc-size(auto, size) 写法，不用全局开 interpolate-size。

需要精确控制：Web Animations API

const toggleHeight = (el: HTMLElement, expand: boolean) => {
  const start = expand ? 0 : el.scrollHeight;
  const end = expand ? el.scrollHeight : 0;
  el.animate(
    [{ height: `${start}px` }, { height: `${end}px` }],
    { duration: 300, easing: 'ease', fill: 'forwards' }
  );
};

走 GPU 合成线程、不阻塞渲染，适合对动画要求极精确、又不想被 CSS 限制的场景。代价是要写 JS，代码量多些。

语义化首选：

+

文档页、静态页不想写 JS 的话，直接用原生折叠元素，无障碍友好：

<details class="ai-details">
  <summary>标题</summary>
  <div class="content">详细内容</div>
</details>

动画照旧用 grid-template-rows 配合，还能把原生箭头 hidden 掉。Vue 里双向绑定不如自定义组件灵活，纯静态场景首选。

对比一张表

方案	动画质量	代码量	兼容性	推荐度
grid-template-rows	⭐⭐⭐⭐⭐	5 行	Chrome 84+	⭐⭐⭐⭐⭐
interpolate-size	⭐⭐⭐⭐⭐	4 行	Chrome 133+	未来
Web Animations API	⭐⭐⭐⭐⭐	20 行	全现代	⭐⭐⭐⭐
<details>	⭐⭐⭐⭐⭐	混合	全现代	⭐⭐⭐⭐
max-height	⭐⭐	4 行	IE10+	⭐⭐
transform: scaleY()	⭐⭐⭐	6 行	IE9+	⭐⭐

实践建议

1. 现代项目直接 grid-template-rows，省心。
2. 要兼容老浏览器，用 CSS.supports('grid-template-rows', '0fr') 检测，不支持就降级成无动画方案。
3. 等 Chrome 133+ 普及，平滑切到 height: auto + interpolate-size。

---

原文链接：https://blog.fateguy.com/posts/web-expand-collapse