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中文網其他相關文章！