CSS如何实现高度从0到auto的过渡_利用grid-template-rows动画-css教程-PHP中文网

height: 0→auto的transition失效因auto不可插值；grid-template-rows用0fr→1fr实现伪过渡，需display: grid、overflow: hidden；max-height过渡需设具体终值，JS测高是终极方案。

css如何实现高度从0到auto的过渡_利用grid-template-rows动画

为什么直接对 height: 0 → height: auto 做 transition 失效

因为 auto 不是可计算的数值长度，浏览器无法插值——transition 只能作用于明确的数字单位（如 px、em、rem），而 auto 是布局阶段才解析的逻辑值。你写 height: 0; transition: height 0.3s; 再改成 height: auto;，实际效果是“瞬间跳变”，毫无过渡。

用 grid-template-rows 实现“伪 height: auto 过渡”的原理

核心思路是：避开 height，改用 grid-template-rows 控制一个显式定义的网格行高，并让该行高从 0fr（视觉上折叠）过渡到 1fr（撑开内容）。前提是容器为 display: grid，且子元素位于该行中。

必须把待展开的内容包进一个 grid 容器里，且该容器只有一行用于承载内容
grid-template-rows 的初始值设为 0fr（不是 0px！0fr 在 Grid 中表示“分配零份额”，但保留 track，不会破坏布局流）
目标状态设为 1fr，Grid 会自动按内容高度分配空间
需配合 overflow: hidden 防止内容溢出未展开时的“视觉残留”

示例：

.accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.25s ease-in-out;
}
.accordion-panel.is-open {
  grid-template-rows: 1fr;
}

grid-template-rows 动画的兼容性与限制

grid-template-rows 的 fr 单位动画在现代浏览器（Chrome 66+、Firefox 61+、Safari 14.1+）中已稳定支持，但仍有几个关键约束：

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

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

下载

不能和 minmax() 或 fit-content() 混用做动画——例如 grid-template-rows: 0fr; → minmax(0, max-content) 不会过渡
如果内容高度变化频繁（比如文字重排、图片加载完成），1fr 会重新计算，但动画本身不会“追帧”，只触发一次从 0fr → 1fr
IE 完全不支持，连 fallback 都得另写（比如用 max-height + 大量像素值模拟）
若父容器高度被限制（如 max-height: 200px），1fr 仍会尝试撑满可用空间，可能溢出；此时建议加 overflow: hidden 并确保内容可滚动