根据规范，过渡应该在grid-template-columns和上进行grid-template-rows。
可动画的： 作为长度，百分比或计算的简单列表，但唯一的区别是列表中的长度，百分比或计算分量的值
因此，如果我的解释是正确的，只要对属性的值进行唯一的更改，而对规则的结构没有任何更改，则过渡应该起作用。 但是他们没有 。
这确实有效，但到目前为止仅在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;
/* non-essential */
grid-gap: 10px;
padding: 10px;
@R_711_2419@-sizing: border-@R_711_2419@;
}
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。
602392714
清零编程群