首頁 > web前端 > css教學 > CSS 轉換是否適用於所有瀏覽器中的「網格模板列」和「網格模板行」?

CSS 轉換是否適用於所有瀏覽器中的「網格模板列」和「網格模板行」?

Mary-Kate Olsen
發布: 2024-11-16 06:02:02
原創
536 人瀏覽過

Do CSS Transitions Work on `grid-template-columns` and `grid-template-rows` in All Browsers?

在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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板