根据规范,过渡应该在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
。