如何为元素在grid-row:2与grid-row:3间的切换添加过渡动画？

由于grid-row是基于网格线的离散属性，CSS无法直接对其添加过渡动画，我们可以通过固定网格行高结合transform位移来模拟平滑的上下移动效果，同时配合opacity实现淡入淡出。具体实现如下：

步骤1：设置网格容器的固定行高 #

首先给网格容器明确设置行高，确保第二行和第三行高度一致，这样位移距离统一：

.grid-container {
  display: grid;
  grid-template-rows: auto 60px 60px; /* 根据需求调整行高 */
  gap: 8px; /* 可选，设置行间距 */
}

步骤2：给元素添加基础样式与过渡属性 #

为目标元素设置基础样式，同时指定过渡的属性和时长：

.target-element {
  grid-row: 2; /* 默认处于第二行 */
  transition: all 0.3s ease; /* 过渡所有可动画属性，时长0.3秒，缓动效果 */
}

步骤3：修改.show和.hide类的样式 #

调整两类的样式，用transform: translateY()模拟行位置切换，同时保留opacity的淡入淡出：

.target-element.show {
  opacity: 1;
  transform: translateY(0); /* 停在第二行位置 */
}

.target-element.hide {
  opacity: 0;
  transform: translateY(100%); /* 向下移动一个行高，到达第三行位置 */
}

补充说明 #

• 如果不需要淡入淡出效果，可以只保留transform的过渡。
• 若必须使用grid-row属性切换（而非transform模拟），可以尝试使用CSS变量结合grid-row-start的过渡，但该方法兼容性较差，示例代码如下：

.target-element {
  --grid-row: 2;
  grid-row: var(--grid-row);
  transition: grid-row-start 0.3s ease;
}

.target-element.hide {
  --grid-row: 3;
}

注意：部分旧版浏览器可能不支持该特性，推荐优先使用transform的方案。

内容的提问来源于stack exchange，提问作者Juani Lopez Patterson