CSS 網格佈局中的過渡問題排查
CSS 過渡可以應用於網格屬性，從而實現流暢的動畫。但是，必須滿足某些條件才能使過渡正常運作。
根據 CSS 規範，當僅值改變而不改變規則的結構。不過，目前僅 Firefox 支援此功能。其他瀏覽器可能會在未來的更新中實現它。
測試案例
考慮以下測試案例：
grid-container {
display: inline-grid;
grid-template-columns: 100px 20vw 200px;
grid-template-rows: repeat(2, 100px);
background-color: black;
height: 230px;
transition: 2s;
}
grid-container:hover {
grid-template-columns: 50px 10vw 100px;
grid-template-rows: repeat(2, 50px);
background-color: red;
height: 130px;
transition: 2s;
}
grid-item {
background-color: lightgreen;
}<grid-container> <grid-item></grid-item> <grid-item></grid-item> <grid-item></grid-item> <grid-item></grid-item> <grid-item></grid-item> <grid-item></grid-item> </grid-container>
在這種情況下，儘管語法上正確，但該轉換在Firefox 以外的瀏覽器中不起作用。
以上是為什麼 CSS 過渡不適用於所有瀏覽器中的網格模板屬性？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
