Cara Menghidupkan Div dengan Paparan: Tiada Hanya Menggunakan CSS?

Animasi CSS dengan Paparan: Tiada Dilema

Apabila bekerja dengan animasi CSS, anda mungkin menghadapi situasi di mana anda mahu div slaid masuk kemudian manakala elemen lain mengisi ruangnya pada mulanya. Walau bagaimanapun, jika anda menetapkan div animasi untuk dipaparkan: tiada, ia terus menduduki ruang dan menghalang elemen lain daripada mengalir dengan betul.

Untuk menyelesaikan isu ini, anda memerlukan satu cara untuk memastikan bahawa div animasi tidak t mengambil ruang sehingga masa yang ditetapkan untuk muncul. Walaupun anda boleh mempertimbangkan untuk menggunakan jQuery, artikel ini menumpukan pada penyelesaian CSS semata-mata untuk pemasaan yang lebih lancar dan terkawal.

Pengerasan Ketinggian

Kuncinya terletak pada pengekodan keras ketinggian div animasi. Dengan cara ini, ia menyimpan ruang yang diperlukan tanpa menyebabkan dirinya kelihatan. Anda kemudiannya boleh menggunakan animasi CSS untuk mengubah ketinggiannya pada masa yang sesuai.

Sebagai contoh, pertimbangkan kod berikut:

#main-image {
    height: 0;
    overflow: hidden;
    transition: height 1s ease 3.5s;
}

Animasi dengan Kerangka Kunci

Setelah ketinggian ditetapkan, anda boleh menggunakan bingkai utama untuk menghidupkan perubahannya. Berikut ialah contoh:

#main-image.fadeInDownBig {
    height: 300px;
}

Dalam contoh ini, kelas fadeInDownBig digunakan pada div imej utama pada masa yang dikehendaki, mencetuskan peralihan kepada ketinggian yang dimaksudkan.

Sokongan dan Demo Penyemak Imbas

Penyelesaian CSS sahaja ini berfungsi dengan baik dalam penyemak imbas moden. Anda boleh melihat demo langsung di pautan berikut:

• http://jsfiddle.net/duopixel/qD5XX/

Dengan menggunakan ini teknik, anda boleh mencapai animasi CSS yang lancar tanpa masalah paparan: tiada, memastikan div anda mengalir dengan lancar seperti yang dimaksudkan.

Atas ialah kandungan terperinci Cara Menghidupkan Div dengan Paparan: Tiada Hanya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!