CSS 動畫格狀版面配置

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

瀏覽器支援

  • Chrome:107。
  • Edge:107。
  • Firefox:66。
  • Safari:16 歲。

在 CSS 中,您可以使用 transition 屬性,讓屬性從一個值平順轉換至另一個值。

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

#target:hover {
  opacity: 1;
}

顯示引擎會自動偵測指定屬性值的類型,並使用這項資訊順利轉換至新的值。

例如:

  • 要將 opacity0 轉換至 1 嗎? 這是數值插補。
  • background-colorwhite 轉換為 black?在來源和目標顏色之間進行淡出效果。
  • 要轉換 width 嗎?以數值插補,並視需要轉換單位。

同樣適用於 CSS 動畫,瀏覽器會在主要畫面格之間執行值內插。

grid-template-columnsgrid-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-columnsgrid-template-rows 值的動畫。