Rumah > hujung hadapan web > tutorial css > Bolehkah Animasi CSS Berfungsi dengan Elemen Ditetapkan kepada `display: none`?

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

Patricia Arquette
Lepaskan: 2024-11-30 20:53:16
asal
125 orang telah melayarinya

Can CSS Animations Work with Elements Set to `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; }
}
Salin selepas log masuk

HTML:

<div>
Salin selepas log masuk

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!

sumber:php.cn
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