Adakah Peralihan CSS Berfungsi pada `grid-template-columns` dan `grid-template-rows` dalam Semua Penyemak Imbas?

Menggunakan Peralihan CSS dalam Reka Letak Grid CSS

Dalam coretan kod anda, anda telah melaksanakan peralihan CSS dengan betul untuk menghidupkan ketinggian pembalut kelas (grid-template-rows). Walau bagaimanapun, peralihan untuk sifat Grid CSS belum lagi disokong dalam semua penyemak imbas.

Spesifikasi semasa menyatakan bahawa peralihan harus berfungsi pada lajur-templat-grid dan baris-templat-grid asalkan satu-satunya perubahan adalah pada nilai sifat. Walau bagaimanapun, dalam sesetengah penyemak imbas, peralihan pada sifat ini mungkin tidak berfungsi.

Terdapat pelaksanaan yang dikemas kini yang membenarkan peralihan pada lajur-templat-grid dan baris-baris-templat-grid. Pelaksanaan ini hanya disokong dalam Firefox pada masa ini.

Kod Ujian:

Untuk menguji sama ada peralihan pada lajur-templat-grid dan baris-templat-grid berfungsi dalam penyemak imbas anda , anda boleh menggunakan kod berikut:

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>

Jika ketinggian dan lebar grid berubah dengan lancar apabila melayang di atas bekas dalam Firefox, kemudian peralihan pada grid-template-lajur dan grid-template-baris disokong dalam penyemak imbas anda.

Atas ialah kandungan terperinci Adakah Peralihan CSS Berfungsi pada `grid-template-columns` dan `grid-template-rows` dalam Semua Penyemak Imbas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!