Bolehkah Sifat Tata Letak Grid CSS Dianimasikan?

Menghidupkan Sifat Tata Letak Grid CSS

Walaupun spesifikasi Tata Letak Grid CSS menunjukkan bahawa peralihan harus digunakan pada lajur-templat-grid dan templat-grid -rows, ia tidak berfungsi dalam kebanyakan masa pelayar.

Pelaksanaan Semasa:

Firefox menyokong sifat grid menganimasikan dan memberikan contoh di sini:
https://codepen.io/matuzo/post/animating-css-grid-layout-properties

Kaveat:

Struktur grid tidak boleh berubah semasa menghidupkan dimensi baris dan lajur. Sebagai contoh, menambah atau mengalih keluar baris akan memecahkan animasi.

Kod Ujian:

Pertimbangkan 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>
  <!-- Additional items -->
</grid-container>

Nota: Kod ujian dalam contoh ini disertakan dalam ulasan HTML untuk paparan.

Atas ialah kandungan terperinci Bolehkah Sifat Tata Letak Grid CSS Dianimasikan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!