動畫CSS網格（如何示例）-css教學-PHP中文網

Animating CSS Grid (How To Examples)

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

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

示例 1：展開側邊欄

首先，這就是我們要討論的內容：

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

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

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

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

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

登入後複製

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

.grid {
  display: grid;
}

登入後複製

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

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

登入後複製

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

.grid {
  display: grid;
  grid-template-columns: 48px auto;
  transition: 300ms; /* 根据需要更改 */
}

登入後複製

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

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

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

登入後複製

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

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

.grid {
  display: grid;
}

登入後複製

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

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

登入後複製

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

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

示例 2：展開面板

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

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

示例 3：添加行和列

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

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

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