CSS自动高度过渡动画技巧

本文揭秘了一种巧妙绕过CSS高度动画限制的实用技巧：利用`grid-template-rows: 0fr → 1fr`实现真正平滑、自适应内容高度的展开与收起动画——不同于无法插值的`height: auto`，`fr`单位作为可计算、可过渡的弹性比例，让浏览器能在确定高度上下文中精准分配空间；但必须严格满足三大前提：容器具备明确高度上下文、显式声明`grid-template-rows`、内容区启用`overflow: hidden`，稍有疏漏便会动画失效或布局错乱，文中还深入剖析了常见翻车点、移动端兼容策略及动态内容下的重排应对方案，堪称现代CSS动画中兼顾优雅与鲁棒性的高阶实践指南。

直接用 height: auto 做过渡动画是不可能的——CSS 不支持从固定值到 auto 的插值计算，浏览器会跳过动画直接渲染。但用 grid-template-rows + fr 单位可以绕过这个限制，实现真正平滑、内容自适应的高度展开/收起。

为什么 grid-template-rows: 0fr → 1fr 能过渡

因为 fr 是一个可计算、可插值的弹性单位，不是“内容高度”，而是“剩余空间分配比例”。0fr 表示该行轨道不参与剩余空间分配（视觉上高度为 0），1fr 表示它拿走所有可用空间。只要容器有明确高度（或被其他行约束），过渡就能生效。

• 0fr 不等于 height: 0，而是“轨道尺寸为 0”，配合 overflow: hidden 才隐藏内容
• 必须给父容器设 display: grid 和显式 grid-template-rows，否则 fr 无参照空间
• 子元素不能设 height 或 min-height 硬性撑高，否则会干扰轨道收缩
• 过渡触发依赖状态变化（如 :hover、.active 类），不能靠 JS 直接改 style.gridTemplateRows —— 那会丢失 CSS 动画上下文

grid-template-rows 过渡必须满足的三个前提

缺一不可，否则动画不动或布局错乱：

• 容器必须有**确定的块级高度上下文**：要么自身设 height/max-height，要么被父级约束（如 flex 容器中的 flex: 1），或由其他 fr/px 行固定总高。纯 height: auto 的容器里，1fr 没有“剩余空间”可分
• grid-template-rows 必须是**显式声明**，不能靠 grid-auto-rows 补充。例如 grid-template-rows: 0fr → grid-template-rows: 1fr 才有效；而 grid-auto-rows: 0fr 是无效写法
• 内容区需加 overflow: hidden，且内部元素不要设 margin-top/bottom 外溢（可用 padding 替代），否则收起时底部留白或内容露头

实际写法与常见翻车点

典型结构：

.accordion-trigger { cursor: pointer; }
.accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease-in-out;
  overflow: hidden;
}
.accordion-panel.active {
  grid-template-rows: 1fr;
}
.accordion-panel > * {
  margin: 0; /* 防止 p/ul 默认外边距撑开 */
  padding: 12px 16px;
}

• 别用 all 0.3s 过渡——会把 grid-template-columns 等无关属性也卷进来，拖慢性能
• 移动端点击触发时，确保 .active 类能稳定切换；iOS Safari 对 :hover 支持弱，优先用 JS 切类
• 如果内容高度差异极大（比如一段文字 vs 一张大图），1fr 展开后可能留大片空白。此时改用 minmax(0, max-content) 更准，但注意 Safari 旧版不支持 max-content 在 minmax() 中
• 多个面板同时展开？别共用同一套 grid-template-rows。每个面板得是独立网格容器，否则 1fr 会均分它们的总高，导致单个内容被压缩

最易被忽略的是：这个技巧本质是“用空间分配替代高度控制”，它不感知内容真实高度，只响应容器可用空间。所以当内容动态加载、图片懒加载完成、或字体加载延迟导致重排时，1fr 分配可能滞后——需要手动触发 grid-template-rows 重置，或在内容就绪后强制 reflow。

好了，本文到此结束，带大家了解了《CSS自动高度过渡动画技巧》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！