CSS 转换是否适用于所有浏览器中的“网格模板列”和“网格模板行”？

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

在您的代码片段中，您已正确实现 CSS 过渡来为包装器的高度设置动画类（网格模板行）。但是，并非所有浏览器都支持 CSS 网格属性的过渡。

当前规范规定，过渡应该在 grid-template-columns 和 grid-template-rows 上工作，只要唯一的更改是对属性的值。但是，在某些浏览器中，这些属性上的转换可能不起作用。

有一个更新的实现，允许在 grid-template-columns 和 grid-template-rows 上进行转换。目前仅 Firefox 支持此实现。

测试代码：

测试 grid-template-columns 和 grid-template-rows 上的过渡是否在您的浏览器中工作，可以使用下面的代码：

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 中的容器上，然后您的浏览器支持 grid-template-columns 和 grid-template-rows 上的转换。

以上是CSS 转换是否适用于所有浏览器中的“网格模板列”和“网格模板行”？的详细内容。更多信息请关注PHP中文网其他相关文章！