Bagaimanakah anda boleh mencipta animasi gelongsor dalam CSS apabila elemen animasi mempunyai `display: none;`?

Animasi CSS Bersama Paparan: Tiada

Anda ingin mencipta animasi CSS di mana "div-utama" meluncur masuk selepas tempoh yang ditentukan, menolak div lain dalam laluannya. Walau bagaimanapun, menetapkan sifat "display" kepada "none" untuk "main-div" menghalang animasi daripada dicetuskan.

Untuk mengatasi had ini, anda tidak boleh menghidupkan secara langsung antara "display: none;" dan "paparan: blok;" atau antara "ketinggian: 0;" dan "ketinggian: auto." Sebaliknya, anda mesti menentukan ketinggian div secara manual.

Berikut ialah contoh menggunakan CSS vanila:

#main-image {
    height: 0;
    overflow: hidden;
   -moz-animation-delay: 3.5s;
   -webkit-animation-delay: 3.5s;
   -o-animation-delay: 3.5s;
    animation-delay: 3.5s;
}

@-prefix-keyframes slide {
  from {height: 0;}
  to {height: 300px;}
}

Dalam kod ini, kami secara eksplisit menetapkan ketinggian "imej utama" div kepada 0 piksel pada mulanya, menyembunyikannya dengan berkesan. "Limpahan: tersembunyi;" sifat menghalang mana-mana kandungan daripada melimpahi ketinggian yang ditentukan.

Kemudian, kami menggunakan animasi CSS untuk beralih dengan lancar daripada ketinggian awal 0 kepada ketinggian 300px yang dikehendaki. Sifat "animation-delay" memastikan animasi bermula selepas kelewatan 3.5 saat.

Menggunakan pendekatan ini, anda boleh mencipta animasi gelongsor tanpa menggunakan "display: none;" sambil mengekalkan peralihan yang lancar dan pemasaan yang tepat yang disediakan oleh CSS.

Atas ialah kandungan terperinci Bagaimanakah anda boleh mencipta animasi gelongsor dalam CSS apabila elemen animasi mempunyai `display: none;`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!