CSS Grid 的 grid-template-rows 和 grid-template-columns 屬性現(xiàn)在可在所有主流瀏覽器中進行動畫效果處理！事實上，CSS Grid 長期以來一直支持動畫，因為它已內(nèi)置於 CSS Grid 佈局模塊級別 1 規(guī)範中。

但直到最近，所有三大瀏覽器才全面支持對這些網(wǎng)格屬性進行動畫處理。讓我們來看幾個例子，激發(fā)您的創(chuàng)意吧！

目錄

• 目錄
• 示例 1：展開側邊欄
• 示例 2：展開面板
• 示例 3：添加行和列
• 更多示例

示例 1：展開側邊欄

首先，這就是我們要討論的內(nèi)容：

一個簡單的兩列網(wǎng)格。以前，您可能不會使用 CSS Grid 來構建它，因為不支持動畫和過渡，但如果您希望左側列（可能是側邊欄導航）在懸停時展開呢？現(xiàn)在，這是可能的。

我知道你在想什麼：“動畫 CSS 屬性？小菜一碟，我已經(jīng)做了很多年了！”我也是。但是，在嘗試一個特定的用例時，我遇到一個有趣的障礙。

因此，我們想要轉(zhuǎn)換網(wǎng)格本身（特別是示例中 .grid 類上設置的 grid-template-columns）。但左側列（.left）是需要 :hover 偽類的選擇器。雖然 JavaScript 可以輕鬆解決這個難題——謝謝，但不用了——我們可以只用 CSS 來實現(xiàn)它。

讓我們逐步講解整個過程，從 HTML 開始。實際上非常標準……一個有兩列的網(wǎng)格。

<div class="grid">
  <div class="left"></div>
  <div class="right"></div>
</div>

撇開裝飾性 CSS 不談，您首先需要在父容器（.grid）上設置 display: grid。

.grid {
  display: grid;
}

接下來，我們可以使用 grid-template-columns 屬性定義和調(diào)整兩列的大小。我們將左側列設置得非常窄，稍後在懸停時增加其寬度。右側列將佔據(jù)其餘空間，這要感謝 auto 關鍵字。

.grid {
  display: grid;
  grid-template-columns: 48px auto;
}

我們知道我們要為它製作動畫，所以讓我們在添加動畫的同時也添加一個過渡效果，這樣狀態(tài)之間的變化就會平滑且明顯。

.grid {
  display: grid;
  grid-template-columns: 48px auto;
  transition: 300ms; /* 根據(jù)需要更改 */
}

.grid 就完成了！剩下的就是應用懸停狀態(tài)。具體來說，我們將覆蓋 grid-template-columns 屬性，以便左側列在懸停時佔據(jù)更大的空間。

僅此一項並沒有那麼有趣，儘管 CSS Grid 現(xiàn)在支持動畫和過渡非常棒。更有趣的是，我們可以使用相對較新的 :has() 偽類來在子元素（.left）懸停時設置父容器（.grid）的樣式。

<div class="grid">
  <div class="left"></div>
  <div class="right"></div>
</div>

用簡單的英語來說，這就是說：“如果 .grid 容器包含一個名為 .left 的元素並且該元素處於懸停狀態(tài)，則對 .grid 容器執(zhí)行某些操作?！边@就是為什麼 :has() 通常被稱為“父”選擇器。我們終於可以根據(jù)它包含的子元素來選擇父元素——不需要 JavaScript！

因此，讓我們在懸停時將 .left 列的寬度增加到 30%。 .right 列將繼續(xù)佔據(jù)所有剩餘空間：

.grid {
  display: grid;
}

我們也可以使用 CSS 變量，這在外觀上可能更簡潔，也可能不簡潔，這取決於您的個人喜好（或者您可能已經(jīng)在項目中使用 CSS 變量了）：

.grid {
  display: grid;
  grid-template-columns: 48px auto;
}

我非常喜歡 CSS 網(wǎng)格現(xiàn)在可以製作動畫，但事實上我們只需九行 CSS 代碼就能構建這個特定示例，這更令人驚嘆。

這是 Olivia Ng 的另一個示例——概念相似，但包含內(nèi)容（點擊導航圖標）：

示例 2：展開面板

此示例轉(zhuǎn)換網(wǎng)格容器（列寬），也轉(zhuǎn)換各個列（其背景顏色）。它非常適合在懸停時提供更多內(nèi)容。

值得記住的是，repeat() 函數(shù)有時會產(chǎn)生錯誤的過渡，這就是為什麼我單獨設置每列的寬度（即 grid-template-columns: 1fr 1fr 1fr）。

示例 3：添加行和列

此示例會動畫地“添加”一列到網(wǎng)格中。但是——你猜對了——這種情況也有一個陷阱。要求是“新”列不能隱藏（即設置為 display: none），並且 CSS Grid 必須在將它的寬度設置為 0fr 時承認它的存在。

因此，對於一個三列網(wǎng)格——grid-template-columns: 1fr 1fr 0fr（是的，即使值為 0 也必須聲明單位?。_地轉(zhuǎn)換為 grid-template-columns: 1fr 1fr 1fr，但 grid-template-columns: 1fr 1fr 不會。事後看來，考慮到我們對過渡工作原理的了解，這實際上是完全合理的。

這是 Michelle Barker 的另一個示例——相同概念，但帶有一列和更多炫酷效果。確保以全屏模式運行此示例，因為它實際上是響應式的（沒有技巧，只是好的設計?。?

更多示例

為什麼不呢？

這個“動畫蒙德里安”是 Chrome DevRel 製作的動畫 CSS 網(wǎng)格的最初概念證明。 grid-row 和 grid-column 使用 span 關鍵字創(chuàng)建您眼前看到的佈局，然後使用 CSS 動畫對 grid-template-row 和 grid-template-column 進行動畫處理。它並沒有看起來那麼複雜！

相同概念，但更多 Michelle Barker 的炫酷效果?？梢宰鲆粋€不錯的加載微調(diào)器？

最後回顧一下懷舊（這裡顯示我的年齡），Andrew Harvard 製作的不太像網(wǎng)格的動畫 CSS 網(wǎng)格。同樣——相同概念——你只是看不到其他網(wǎng)格項目。但別擔心，它們在那裡。

以上是動畫CSS網(wǎng)格（如何示例）的詳細內(nèi)容。更多資訊請關注PHP中文網(wǎng)其他相關文章！