Mengapa Peralihan CSS Tidak Berfungsi pada Sifat Templat Grid dalam Semua Penyemak Imbas?

Menyelesaikan Masalah Peralihan dalam Reka Letak Grid CSS

Peralihan CSS boleh digunakan pada sifat grid, membenarkan animasi yang lancar. Walau bagaimanapun, syarat tertentu mesti dipenuhi untuk peralihan berfungsi dengan betul.

Menurut spesifikasi CSS, peralihan harus berfungsi pada lajur-templat-grid dan sifat baris-templat-grid apabila hanya nilai berubah, tanpa mengubah struktur peraturan. Walau bagaimanapun, ini hanya disokong dalam Firefox pada masa ini. Penyemak imbas lain mungkin melaksanakannya dalam kemas kini masa hadapan.

Kes Ujian

Pertimbangkan kes ujian 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>

Dalam kes ini , peralihan tidak akan berfungsi dalam penyemak imbas selain Firefox, walaupun secara sintaksis betul.

Atas ialah kandungan terperinci Mengapa Peralihan CSS Tidak Berfungsi pada Sifat Templat Grid dalam Semua Penyemak Imbas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!