CSS 网格布局属性可以设置动画吗？

动画 CSS 网格布局属性

尽管 CSS 网格布局规范指示过渡应应用于 grid-template-columns 和 grid-template -rows，目前在大多数情况下不起作用浏览器。

当前实现：

Firefox 支持动画网格属性，并提供了示例这里：
https://codepen.io/matuzo/post/animating-css-grid-layout-properties

警告：

网格结构不能在对行和列尺寸进行动画处理时进行更改。例如，添加或删除行会破坏动画。

测试代码：

考虑以下测试：

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>
  <!-- Additional items -->
</grid-container>

注意：此示例中的测试代码包含在 HTML 注释中，以便正确显示。

以上是CSS 网格布局属性可以设置动画吗？的详细内容。更多信息请关注PHP中文网其他相关文章！