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

【问题标题】：Can I animate "grid-column"?我可以为“网格列”设置动画吗？
【发布时间】：2019-08-30 06:58:10
【问题描述】：

我设置了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上传了一个精简版

【问题讨论】：

Using CSS transitions in CSS Grid Layout

标签： html css css-transitions css-grid

【解决方案1】：

根据 Mozilla 上的文档：https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column

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

这真是太糟糕了。

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

animating a smooth css grid-column change

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

这个回复有点晚了，但不幸的是：不，这是不可能的，它可能不会成为规范的一部分，因为为了提高效率，浏览器还有其他特殊属性如何显示网格。

作为替代方案，并且出于您提供的演示的目的，可以通过display:flex + flex-grow:n 完成类似的布局，其中值n 是一个整数，可以认为等同于nfr .您还可以使用flex-basis 并指定% 或px，这也是可动画的。

【讨论】：