CSS 网格布局中的过渡问题排查
CSS 过渡可以应用于网格属性，从而实现流畅的动画。但是，必须满足某些条件才能使过渡正常运行。
根据 CSS 规范，当仅值发生变化而不改变规则的结构。不过，目前仅 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-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>
在这种情况下，尽管语法上正确，但该转换在 Firefox 以外的浏览器中不起作用。
以上是为什么 CSS 过渡不适用于所有浏览器中的网格模板属性？的详细内容。更多信息请关注PHP中文网其他相关文章！
