我可以为 "grid-column" 制作动画吗？

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 上的文档，看起来您可以根据您的意思制作动画 grid-column：https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column

网格列的动画类型是 discrete，这意味着没有 "tweening" 或插值。

真可惜。

有一些 hacky（或在其他情况下，大量使用 JS）解决方法，但 YMMV 取决于您要投入多少精力。请参阅此线程，例如：

animating a smooth css grid-column change

Answer 2

您可以像下面这样使用边距来模拟这种效果：

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

<div class="projects">
    <div class="project" style="background: url(https://picsum.photos/200/300?image=0) center no-repeat / cover"></div>
    <div class="project" style="background: url(https://picsum.photos/200/300?image=1069) center no-repeat / cover"></div>
    <div class="project" style="background: url(https://picsum.photos/200/300?image=5) center no-repeat / cover"></div>
    <div class="project" style="background: url(https://picsum.photos/200/300?image=10) center no-repeat / cover"></div>
</div>

我可以为 "grid-column" 制作动画吗？

Can I animate "grid-column"?

html

css

css-transitions

css-grid