为什么 CSS 过渡不适用于所有浏览器中的网格模板属性？

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中文网其他相关文章！