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

我设置了过渡：所有缓入1s；但是以相同的方式更改网格列的属性不适用于过渡.

还有其他使用动画的方法吗？

<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上载了简明版本

最佳答案

根据您的意思,似乎没有可以根据Mozilla：https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column上的文档制作网格列动画

网格列的动画类型是离散的,这意味着没有“补间”或插值.

真是可惜

有一些hacky(或在其他情况下为JS繁杂)的解决方法,但YMMV取决于您要投入多少精力.请参见此线程,例如：

animating a smooth css grid-column change

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

相关文章