Mengapa Peralihan CSS Tidak Berfungsi Dengan Harta `display`?

Peralihan CSS3 Tidak Berfungsi dengan Ciri paparan

Penerangan Masalah:

Percubaan untuk menggunakan Peralihan CSS untuk pudar dalam div tersembunyi pada hover tidak menghasilkan hasil yang diingini; tiada peralihan pelonggaran diperhatikan.

Analisis Kod:

Setelah meneliti kod yang disediakan, ternyata masalah itu berpunca daripada penggunaan sifat paparan. Sifat paparan dalam CSS mengawal kehadiran dan keterlihatan elemen pada halaman. Apabila ditetapkan kepada tiada, kerana ia berada dalam keadaan awal div tersembunyi, elemen itu dialih keluar daripada aliran dokumen halaman dan secara berkesan menjadi tidak kelihatan.

Kebolehgunaan Peralihan:

Peralihan CSS hanya digunakan pada sifat yang mempengaruhi geometri atau penampilan elemen. Dalam kes sifat paparan, ia menogol status keterlihatan elemen daripada mengubah geometri atau penampilannya. Akibatnya, peralihan tidak boleh digunakan pada sifat paparan.

Penyelesaian Alternatif Menggunakan Kelegapan:

Daripada menggunakan sifat paparan, pertimbangkan untuk menggunakan sifat kelegapan untuk mencapai kesan fade-in yang diingini. Kelegapan mengawal ketelusan sesuatu elemen, membolehkannya memudar dengan lancar dengan melaraskan kelegapannya daripada 0 kepada 1.

Kod CSS yang dikemas kini:

Kod CSS dikemas kini berikut menggunakan sifat kelegapan untuk mencipta fade-in yang lancar peralihan:

#header #button:hover > .content {
    opacity: 1;
    height: 150px;
    padding: 8px;    
}

#header #button .content {
    opacity: 0;
    height: 0;
    padding: 0 8px;
    overflow: hidden;
    transition: all .3s ease .15s;
}

Kelebihan Peralihan Berasaskan Kelegapan:

• Membenarkan kawalan halus ke atas kesan fade-in dengan melaraskan nilai kelegapan .
• Memelihara kedudukan dan dimensi elemen semasa peralihan, tidak seperti paparan yang mengalih keluar elemen daripada aliran dokumen.
• Serasi dengan peralihan CSS, membolehkan transformasi lancar dan animasi.

Kesimpulan:

Sementara CSS peralihan tidak boleh digunakan pada sifat paparan, sifat kelegapan menyediakan penyelesaian yang berdaya maju dan berkesan untuk mencipta kesan pudar masuk yang lancar pada tuding. Dengan melaraskan nilai kelegapan, anda boleh mengawal keterlihatan dan penampilan elemen tersembunyi, mencapai peralihan yang diingini dengan lancar.

Atas ialah kandungan terperinci Mengapa Peralihan CSS Tidak Berfungsi Dengan Harta `display`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!