Bolehkah Animasi CSS Berfungsi dengan Elemen Ditetapkan kepada `display: none`?

Animasi CSS dan Memaparkan Elemen

Anda telah cuba menggunakan animasi CSS dengan elemen yang pada mulanya mempunyai paparan: tiada. Walaupun ini mungkin kelihatan seperti pendekatan mudah untuk menunjukkan dan menyembunyikan elemen secara dinamik, pengehadan CSS menghalangnya.

Masalah dengan paparan: tiada

Animasi CSS tidak boleh mengendalikan peralihan antara paparan: tiada dan paparan: blok atau antara ketinggian: 0 dan ketinggian: auto. Anda perlu mengekod ketinggian jika boleh, jika tidak, menggunakan JavaScript diperlukan.

Menetapkan Ketinggian

Dalam situasi di mana ketinggian pengekodan keras tidak boleh dilaksanakan, anda boleh menggunakan limpahan : tersembunyi untuk menyembunyikan elemen dan tetapkan ketinggiannya kepada 0. Apabila anda bersedia untuk menunjukkannya, tetapkan limpahan kembali kepada kelihatan dan hidupkan ketinggian sepenuhnya takat.

Kod Contoh

CSS:

#main-image {
  height: 0;
  overflow: hidden;
  background: red;
  animation: slide 1s ease 3.5s forwards;
}

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

HTML:

<div>

Dalam contoh ini, limpahan: tersembunyi memastikan elemen kekal tersembunyi kerana ketinggiannya dianimasikan dari 0 hingga 300px.

Nota: Contoh CSS menggunakan CSS vanila. Jika anda menggunakan Animate.css, anda boleh menggantikan peraturan @keyframes dengan kelas Animate.css yang sepadan.

Pendekatan ini membolehkan anda menghidupkan elemen dengan lancar tanpa bergantung pada paparan: tiada atau jQuery, memberikan peralihan yang lebih lancar dan kawalan masa yang lebih tepat.

Atas ialah kandungan terperinci Bolehkah Animasi CSS Berfungsi dengan Elemen Ditetapkan kepada `display: none`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!