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

概述我设置了过渡：所有缓入1s；但是以相同的方式更改网格列的属性不适用于过渡.还有其他使用动画的方法吗？<div class='projects'> <div class='project' style='background: url(img/p1.png) center no-repeat / cover'></div&

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

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

<div >    <div  ></div>    <div  ></div>    <div  ></div>    <div  ></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-我可以为“网格列”设置动画吗？ 全部内容，希望文章能够帮你解决html-我可以为“网格列”设置动画吗？ 所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。