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

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

目錄

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

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

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

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

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

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

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

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

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

.grid {
  display: grid;
}

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

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

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

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

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

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

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

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

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

.grid {
  display: grid;
}

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

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

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

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

示例 2：展開面板

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

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

示例 3：添加行和列

此示例會(huì)動(dòng)畫地“添加”一列到網(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ì)。事後看來，考慮到我們對(duì)過渡工作原理的了解，這實(shí)際上是完全合理的。

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

更多示例

為什麼不呢？

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

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

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

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