在CSS网格布局中使用CSS过渡

在CSS网格布局中使用CSS过渡

根据规范，过渡应该在

grid-template-columns

和上进行

grid-template-rows

。

7.2。 明确的轨道尺寸：

grid-template-rows

和

grid-template-columns

属性

可动画的： 作为长度，百分比或计算的简单列表，但唯一的区别是列表中的长度，百分比或计算分量的值

因此，如果我的解释是正确的，只要对属性的值进行唯一的更改，而对规则的结构没有任何更改，则过渡应该起作用。 但是他们没有 。

---

更新

这确实有效，但到目前为止仅在Firefox中实现。

---

这是我创建的测试：

grid-container {  display: inline-grid;  grid-template-columns: 100px 20vw 200px;  grid-template-rows: repeat(2, 100px);  background-color: black;  height: 230px;  transition: 2s;    grid-gap: 10px;  padding: 10px;  box-sizing: border-box;}grid-container:hover {  grid-template-columns: 50px 10vw 100px;  grid-template-rows: repeat(2, 50px);  background-color: red;  height: 130px;  transition: 2s;}grid-item {  background-color: lightgreen;}<grid-container>  <grid-item></grid-item>  <grid-item></grid-item>  <grid-item></grid-item>  <grid-item></grid-item>  <grid-item></grid-item>  <grid-item></grid-item></grid-container>

在测试中，过渡效果仅适用于高度和背景色，而不适用于

grid-template-rows

或

grid-template-columns

。