為什麼我的 CSS 過渡不能與 CSS 網格佈局一起使用？

在CSS 網格佈局中使用CSS 轉換

問題：

使用CSS 網格佈局實現黏性標題，當向下捲動時標題縮小時，使用者很難實現平滑的過渡效果。儘管在 .wrapper 類別中添加了 CSS 過渡，但動畫並沒有發生。

分析：

根據 CSS 網格佈局規範，過渡應該在網格上工作-template-columns 和 grid-template-rows 屬性。但是，在提供的範例中，未應用過渡。

解決方案：

目前，僅 Firefox 支援網格屬性上的 CSS 轉場。要啟用所需的動畫效果，必須修改佈局以使用支援的方法。一種替代方法是使用 Flexbox 而不是 Grid。

以下是示範修復的更新程式碼片段：

.wrapper {
  display: flex;
  height: 100vh;
  transition: all 0.5s;
}

.wrapper.tiny {
  height: 50vh;
}

以上是為什麼我的 CSS 過渡不能與 CSS 網格佈局一起使用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！