在 CSS 格線中,grid-template-columns
和 grid-template-rows
屬性可分別定義線條名稱,以及追蹤格線欄和列的大小。支援這些屬性的內插功能,可讓格線版面配置在狀態之間流暢轉換,而不必在動畫或轉換的一半點貼齊。
瀏覽器支援
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
設定動畫
此外,格線版面配置也能流暢地在狀態之間轉換,而不是在動畫或轉換的一半點貼齊。
在以下示範中,格線會顯示多個顯示圖片。為了節省空間,系統會使用 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
值的動畫。