我可以为“网格列”设置动画吗？

Question

我设置了transition: all ease-in-out 1s;，但以同样的方式更改 的属性grid-column不起作用transition。

有没有其他方法可以在这里使用动画？

<div class="projects">
    <div class="project" style="background: url(img/p1.png) center no-repeat / cover"></div>
    <div class="project" style="background: url(img/p2.jpg) center no-repeat / cover"></div>
    <div class="project" style="background: url(img/p3.jpg) center no-repeat / cover"></div>
    <div class="project" style="background: url(img/p4.png) center no-repeat / cover"></div>
</div>

.projects {
    width: 100%;
    height: 500px;
    display: grid;
    grid-template-columns: repeat(4, minmax(100px, 1fr));
    grid-auto-rows: 500px;
}
.project {
    width: 100%;
    transition: all ease-in-out 1s;
}
.project:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
}
.project:nth-child(1):hover {
    grid-column: 1/3;
    z-index: 2;
}

我在codepen上上传了一个精简版

Answer 1

根据 Mozilla 的文档，您似乎无法按照您的意思 animate ： https ://developer.mozilla.org/en-US/docs/Web/CSS/grid-columngrid-column

网格列的动画类型是discrete，这意味着没有“补间”或插值。

真是太糟糕了。

有一些 hacky（或者在其他情况下，JS 重）的解决方法，但是 YMMV 根据您想要投入多少精力。请参阅此线程，例如：

动画平滑的 CSS 网格列变化