Mengapa Peralihan CSS Saya Tidak Berfungsi dengan Reka Letak Grid CSS?

Menggunakan Peralihan CSS dalam Reka Letak Grid CSS

Isu:

Dalam pelaksanaan pengepala melekit menggunakan Reka Letak Grid CSS , pengguna bergelut untuk mencapai kesan peralihan yang lancar apabila pengepala mengecut apabila menatal ke bawah. Walaupun menambahkan peralihan CSS pada kelas .wrapper, animasi tidak berlaku.

Analisis:

Menurut spesifikasi Reka Letak Grid CSS, peralihan harus berfungsi pada grid -template-lajur dan grid-template-baris sifat. Walau bagaimanapun, dalam contoh yang diberikan, peralihan tidak digunakan.

Penyelesaian:

Setakat ini, peralihan CSS pada sifat grid hanya disokong dalam Firefox. Untuk mendayakan animasi效果 yang dikehendaki, reka letak mesti diubah suai untuk menggunakan kaedah yang disokong. Satu alternatif ialah menggunakan Flexbox dan bukannya Grid.

Berikut ialah coretan kod yang dikemas kini yang menunjukkan pembetulan:

.wrapper {
  display: flex;
  height: 100vh;
  transition: all 0.5s;
}

.wrapper.tiny {
  height: 50vh;
}

Atas ialah kandungan terperinci Mengapa Peralihan CSS Saya Tidak Berfungsi dengan Reka Letak Grid CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!