怎么在CSS Grid中实现卡片展开时的平滑补间动画-css教程-PHP中文网

css grid 中 grid-template-rows 不支持 transition，因属离散布局函数；应改用 max-height（配合 js 动态测量）或 transform: scaley() 实现平滑展开动画，并配 grid-auto-rows: minmax(0, max-content) 防布局跳动。

怎么在css grid中实现卡片展开时的平滑补间动画

Grid 中直接对 grid-template-rows 做 transition 无效

CSS Grid 的 grid-template-rows 和 grid-template-columns 是离散布局函数，浏览器不支持对其做插值动画。你写 transition: grid-template-rows 0.3s，实际完全没反应——这不是写错了，是规范限制。

常见错误现象：卡片点击后突然展开/收起，没有过渡；DevTools 里看到 transition 属性被标记为 “invalid” 或灰掉。

真正能触发平滑过渡的属性只有：opacity、transform、max-height（需设具体数值）、height（仅当元素有明确 height 时才可靠）
用 max-height 是最常用折中方案，但必须设一个「足够大且确定」的值，不能用 max-height: none（它无法插值）
如果卡片内容高度差异大，硬写死 max-height: 500px 可能导致收起时留白，或展开时被截断

用 max-height + overflow 实现可预测的展开动画

核心思路是让容器在收起时靠 max-height: 0 + overflow: hidden 隐藏内容，展开时过渡到一个大于实际内容高度的固定值。

关键不是“猜高度”，而是用 JS 测量并动态注入 —— 这样既保持 CSS 动画性能，又避免硬编码。

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

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

下载

给卡片容器加 class card-expandable，初始状态设 max-height: 0; overflow: hidden;
展开时，先用 element.scrollHeight 获取真实高度，再设置 style.maxHeight = scrollHeight + 'px'
动画结束后（监听 transitionend），清除内联 max-height，改用 auto 保证后续内容变化仍可用（但此时不再触发动画）
收起时反向操作：先设回 max-height 到当前值（强制重排），再设 0

const card = document.querySelector('.card');
const toggleBtn = document.querySelector('.toggle-btn');

toggleBtn.addEventListener('click', () => {
  const isExpanded = card.classList.toggle('expanded');
  if (isExpanded) {
    card.style.maxHeight = card.scrollHeight + 'px';
  } else {
    card.style.maxHeight = '0';
  }
});

card.addEventListener('transitionend', () => {
  if (!card.classList.contains('expanded')) {
    card.style.maxHeight = 'none';
  }
});

Grid 容器需配合 grid-auto-rows 或 minmax() 避免布局跳动

卡片展开后高度变大，如果 Grid 容器用的是 grid-template-rows: 1fr 1fr 这类固定划分，新高度会撑开整行，导致下方卡片整体下移——这不是动画问题，是 Grid 行高没预留弹性空间。

把 grid-template-rows 换成 grid-auto-rows: minmax(0, max-content)，让每行自动适应内容高度
或者用 grid-auto-rows: 100px + grid-row: span 2 手动控制展开卡占据多行（适合卡片数量少、布局可控场景）
避免在展开卡片上同时使用 align-items: center 或 justify-items: center，它们会干扰高度计算和 overflow 截断