CSS 動畫格線版面配置

在 CSS 格線中，grid-template-columns 和 grid-template-rows 屬性可讓您定義線條名稱，並分別追蹤格線欄和列的大小。只要支援這些屬性的內插功能，格線版面配置就能在狀態之間流暢轉換，而不是貼在動畫或轉換的一半點。

Bramus

CSS 中的值內插

在 CSS 中，您可以使用 transition 屬性，輕鬆將屬性從某個值轉換至另一值。

#target {
  opacity: 0.5;
  transition: opacity ease-in-out 0.25s;
}

#target:hover {
  opacity: 1;
}

轉譯引擎會自動偵測指定屬性值的類型，然後使用這項資訊順利轉換至新的值。

例如：

• 要將 opacity 從 0 轉換至 1 嗎？ 這是數值內插法
• 要將 background-color 從 white 轉換至 black 嗎？ 在來源和目標色彩之間淡出。
• 要轉換 width 嗎？視需求插入數值，並視情況轉換單位。

這也適用於 CSS 動畫，因為瀏覽器會在主要畫面格之間進行內插值。

內插 grid-template-columns 和 grid-template-rows

感謝 Microsoft 貢獻者 (自 107 版起)，我們得以插入 grid-template-columns 和 grid-template-rows 的值。

格狀版面配置能夠流暢切換狀態，不必在動畫或轉換的一半點貼齊。

在示範下方，格狀檢視畫面中顯示了多個顯示圖片。為了保留空間，系統會使用 grid-template-columns 限制每個欄的寬度，讓顯示圖片彼此疊放。懸停時，每個資料欄會顯示更多空間。

.avatars {
  display: grid;
  gap: 0.35em;

  grid-auto-flow: column;
  grid-template-columns: repeat(4, 2em);
  transition: all ease-in-out 0.25s;
}

.avatars:hover {
  grid-template-columns: repeat(4, 4em);
}

設定好 transition 屬性後，格線可在值之間順利插入。

這項變更也適用於變更 grid-template-columns 或 grid-template-rows 值的動畫。

新可互通系列的一部分