在CSS 網格佈局中使用CSS 過渡
在您的程式碼片段中,您已正確實現CSS 過渡來為包裝器的高度設定動畫類別(網格模板行)。但是,並非所有瀏覽器都支援 CSS 網格屬性的過渡。
目前規範規定,過渡應該在 grid-template-columns 和 grid-template-rows 上工作,只要唯一的變更是對屬性的值。但是,在某些瀏覽器中,這些屬性上的轉換可能無法運作。
有一個更新的實現,允許在 grid-template-columns 和 grid-template-rows 上進行轉換。目前僅 Firefox 支援此實作。
測試程式碼:
測試grid-template-columns 和grid-template-rows 上的過渡是否在您的瀏覽器中運作,可以使用以下程式碼:
如果網格的高度和寬度平滑變化時將滑鼠懸停在Firefox中的容器上,然後您的瀏覽器支援 grid-template-columns 和 grid-template-rows 上的轉換。
以上是CSS 轉換是否適用於所有瀏覽器中的「網格模板列」和「網格模板行」?的詳細內容。更多資訊請關注PHP中文網其他相關文章!