从width:100%过渡时动画卡顿跳变的原因及解决方法

我制作了一个示例复现问题：尝试让Grid元素在hover时展开，但出现奇怪现象——元素先被挤到另一个Grid元素下方，随后才跳转到预期状态。

原问题代码 #

CSS

.container {
  height: 100vh;
  width: 100vw;
  display: grid;
  grid-template: 1fr / 1fr 1fr;
  margin: 1em;
  grid-gap: 1em;
}

.box {
  height: 100%;
  width: 100%;
  transition: width 0.5s;
}

.one {
  background: pink;
}

.two {
  background: red;
}

.box:hover {
  width: 60vw;
}

HTML

<div class="container">
  <div class="box one"></div>
  <div class="box two"></div>
</div>

问题成因 #

• Grid布局默认是grid-auto-flow: row，当子元素设置的width超过Grid列的分配宽度时，浏览器会先尝试将元素换行到下一行，之后才会重新计算布局让元素撑到设置的宽度，这就导致了“先被挤到下方再展开”的奇怪过渡。
• 直接修改Grid子元素的width违背了Grid布局的设计逻辑——Grid的列宽应该由容器的grid-template-columns等属性控制，而非子元素自身的width。

解决办法 #

核心是通过控制Grid容器的列宽实现hover效果，同时禁止元素换行，具体实现如下：

修改后的代码

CSS

.container {
  height: 100vh;
  width: 100vw;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 1em;
  grid-gap: 1em;
  grid-auto-flow: column; /* 强制元素在同一行，禁止换行 */
  transition: grid-template-columns 0.5s; /* 列宽平滑过渡 */
}

.box {
  height: 100%;
  /* 移除width:100%，让Grid自动控制子元素宽度 */
}

.one {
  background: pink;
}

.two {
  background: red;
}

/* hover第一个盒子时调整列宽 */
.container:hover {
  grid-template-columns: 60vw 1fr;
}

/* 可选：实现hover哪个盒子就展开哪个的效果（现代浏览器支持） */
/* .container:has(.one:hover) {
  grid-template-columns: 60vw 1fr;
}
.container:has(.two:hover) {
  grid-template-columns: 1fr 60vw;
} */

HTML

<div class="container">
  <div class="box one"></div>
  <div class="box two"></div>
</div>

说明 #

• grid-auto-flow: column确保元素不会因空间不足换行，从根源解决了“被挤到下方”的问题。
• 通过修改容器的grid-template-columns来控制列宽，完全符合Grid布局的规则，过渡效果自然平滑。
• 如果需要hover任意盒子都能展开对应列，可以使用:has()选择器（Chrome、Firefox等现代浏览器已支持），兼容性要求高的话也可以用相邻兄弟选择器配合实现。

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