我设置了 transition: all ease-in-out 1s;
,但是以同样的方式改变 grid-column
的属性对 不起作用转换
。
这里还有其他方法可以使用动画吗?
<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,从您的意思来看,您似乎没有可以为 grid-column
设置动画。
网格列的动画类型是离散
,这意味着没有“补间”或插值。
这是一个无赖。
有一些 hacky(或者在其他情况下,大量使用 JS)的解决方法,但是 YMMV 取决于您想要投入多少精力。看到这个线程,例如:
关于html - 我可以为 "grid-column"设置动画吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55585075/