Rumah > hujung hadapan web > tutorial css > Bagaimanakah anda boleh mencipta animasi gelongsor dalam CSS apabila elemen animasi mempunyai `display: none;`?

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

Barbara Streisand
Lepaskan: 2024-11-15 18:51:02
asal
704 orang telah melayarinya

How can you create a sliding animation in CSS when the animated element has `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;}
}
Salin selepas log masuk

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!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan