Bagaimana Saya Boleh Menghidupkan Div dengan `display: none` dalam CSS?

Animasi CSS dan Paparan Tiada

Apabila cuba menghidupkan div menggunakan CSS, adalah penting untuk memahami batasan sifat paparan. Manakala paparan: tiada; harta boleh menyembunyikan elemen daripada pandangan, ia tidak mengeluarkannya daripada aliran dokumen. Ini boleh membawa kepada isu apabila menganimasikan elemen yang menggunakan ruang pada halaman.

Untuk mencapai kesan yang diingini, anda tidak boleh menukar div utama terus daripada paparan: tiada; untuk memaparkan: blok;. Sebaliknya, anda perlu menetapkan ketinggian div utama kepada 0 dan gunakan limpahan: tersembunyi; untuk menyembunyikannya pada mulanya. Kemudian, apabila tiba masanya untuk div utama meluncur masuk, anda boleh menghidupkan ketinggian div kepada nilai yang dikehendaki.

Berikut ialah contoh:

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

#main-div.fadeInDownBig {
    height: 375px;
}

Ini akan menyebabkan div utama meluncur masuk selepas 3.5 saat, menolak div lain ke bawah halaman semasa ia memasuki port pandangan.

Perhatikan bahawa teknik ini juga berfungsi dengan atribut lain, seperti kelegapan. Contohnya, anda boleh pudar dalam div dengan meningkatkan kelegapannya secara beransur-ansur daripada 0 kepada 1.

Atas ialah kandungan terperinci Bagaimana Saya Boleh Menghidupkan Div dengan `display: none` dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!