CSS Grid 的 grid-template-rows 和 grid-template-columns 屬性現(xiàn)在可在所有主流瀏覽器中進(jìn)行動(dòng)畫(huà)效果處理！事實(shí)上，CSS Grid 長(zhǎng)期以來(lái)一直支持動(dòng)畫(huà)，因?yàn)樗褍?nèi)置于 CSS Grid 布局模塊級(jí)別 1 規(guī)范中。

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

目錄

• 目錄
• 示例 1：展開(kāi)側(cè)邊欄
• 示例 2：展開(kāi)面板
• 示例 3：添加行和列
• 更多示例

示例 1：展開(kāi)側(cè)邊欄

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

一個(gè)簡(jiǎn)單的兩列網(wǎng)格。以前，您可能不會(huì)使用 CSS Grid 來(lái)構(gòu)建它，因?yàn)椴恢С謩?dòng)畫(huà)和過(guò)渡，但如果您希望左側(cè)列（可能是側(cè)邊欄導(dǎo)航）在懸停時(shí)展開(kāi)呢？現(xiàn)在，這是可能的。

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

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

讓我們逐步講解整個(gè)過(guò)程，從 HTML 開(kāi)始。實(shí)際上非常標(biāo)準(zhǔn)……一個(gè)有兩列的網(wǎng)格。

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

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

.grid {
  display: grid;
}

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

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

我們知道我們要為它制作動(dòng)畫(huà)，所以讓我們?cè)谔砑觿?dòng)畫(huà)的同時(shí)也添加一個(gè)過(guò)渡效果，這樣狀態(tài)之間的變化就會(huì)平滑且明顯。

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

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

僅此一項(xiàng)并沒(méi)有那么有趣，盡管 CSS Grid 現(xiàn)在支持動(dòng)畫(huà)和過(guò)渡非常棒。更有趣的是，我們可以使用相對(duì)較新的 :has() 偽類(lèi)來(lái)在子元素（.left）懸停時(shí)設(shè)置父容器（.grid）的樣式。

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

用簡(jiǎn)單的英語(yǔ)來(lái)說(shuō)，這就是說(shuō)：“如果 .grid 容器包含一個(gè)名為 .left 的元素并且該元素處于懸停狀態(tài)，則對(duì) .grid 容器執(zhí)行某些操作?！边@就是為什么 :has() 通常被稱(chēng)為“父”選擇器。我們終于可以根據(jù)它包含的子元素來(lái)選擇父元素——不需要 JavaScript！

因此，讓我們?cè)趹彝r(shí)將 .left 列的寬度增加到 30%。.right 列將繼續(xù)占據(jù)所有剩余空間：

.grid {
  display: grid;
}

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

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

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

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

示例 2：展開(kāi)面板

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

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

示例 3：添加行和列

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

因此，對(duì)于一個(gè)三列網(wǎng)格——grid-template-columns: 1fr 1fr 0fr（是的，即使值為 0 也必須聲明單位！）會(huì)正確地轉(zhuǎn)換為 grid-template-columns: 1fr 1fr 1fr，但 grid-template-columns: 1fr 1fr 不會(huì)。事后看來(lái)，考慮到我們對(duì)過(guò)渡工作原理的了解，這實(shí)際上是完全合理的。

這是 Michelle Barker 的另一個(gè)示例——相同概念，但帶有一列和更多炫酷效果。確保以全屏模式運(yùn)行此示例，因?yàn)樗鼘?shí)際上是響應(yīng)式的（沒(méi)有技巧，只是好的設(shè)計(jì)?。?。

更多示例

為什么不呢？

這個(gè)“動(dòng)畫(huà)蒙德里安”是 Chrome DevRel 制作的動(dòng)畫(huà) CSS 網(wǎng)格的最初概念證明。grid-row 和 grid-column 使用 span 關(guān)鍵字創(chuàng)建您眼前看到的布局，然后使用 CSS 動(dòng)畫(huà)對(duì) grid-template-row 和 grid-template-column 進(jìn)行動(dòng)畫(huà)處理。它并沒(méi)有看起來(lái)那么復(fù)雜！

相同概念，但更多 Michelle Barker 的炫酷效果。可以做一個(gè)不錯(cuò)的加載微調(diào)器？

最后回顧一下懷舊（這里顯示我的年齡），Andrew Harvard 制作的不太像網(wǎng)格的動(dòng)畫(huà) CSS 網(wǎng)格。同樣——相同概念——你只是看不到其他網(wǎng)格項(xiàng)目。但別擔(dān)心，它們?cè)谀抢铩?/p>

以上是動(dòng)畫(huà)CSS網(wǎng)格（如何示例）的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！