如何使用display grid实现元素平滑移动？点击按钮图片瞬移问题求助

问题原因 #

你之前直接修改grid-row和grid-column属性切换布局，但这两个属性属于离散布局属性，CSS无法在这类属性的不同状态间生成平滑过渡动画，所以点击按钮后图片会直接瞬移。

解决方案 #

改用CSS transform属性实现位置平滑移动——transform是支持过渡的可插值属性。通过切换容器的CSS类控制图片位置变化，具体代码修改如下：

HTML（移除多余<br>，Grid布局无需手动换行）

<button id="btn-gallery-arrange">arrange!</button>
<div id="gallery">
  <img id="one" src="https://picsum.photos/200/300" alt="图片1">
  <img id="two" src="https://picsum.photos/200/300" alt="图片2">
</div>

CSS（用transform控制初始/目标位置，添加过渡效果）

#gallery {
  display: grid;
  grid-template-rows: 300px;
  grid-template-columns: repeat(2, 200px);
  gap: 20px;
}

#one {
  grid-row: 1;
  grid-column: 1;
}

#two {
  grid-row: 1;
  grid-column: 2;
  /* 初始状态下移，距离为图片高度+网格间距 */
  transform: translateY(320px);
  /* 添加过渡动画 */
  transition: transform 0.8s ease-in-out;
}

/* 切换后的布局类，让第二张图片回到原位 */
#gallery.arranged #two {
  transform: translateY(0);
}

JS（切换容器CSS类，触发动画）

const btnArrange = document.getElementById("btn-gallery-arrange");
const gallery = document.getElementById("gallery");

btnArrange.addEventListener("click", () => {
  gallery.classList.toggle("arranged");
});

补充说明 #

如果要更贴近参考网站的效果，可调整过渡时间曲线（比如ease-in-out），或为容器添加高度过渡，让整体布局变化更自然。

内容的提问来源于stack exchange，提问作者YingHau