Bagaimana untuk Memulakan Semula Animasi CSS3 dengan Cekap Tanpa Penyingkiran Elemen?

Memulakan semula Animasi CSS3: Teknik yang Lebih Cekap

Apabila bekerja dengan animasi CSS3, selalunya menjadi perlu untuk memulakan semula animasi selepas acara, seperti klik. Walau bagaimanapun, menetapkan skala elemen yang terjejas atau sifat lain secara langsung boleh menimbulkan masalah, yang membawa kepada kelewatan atau rantaian tugasan yang rumit.

Helah Penyingkiran Elemen

Satu kaedah bukan konvensional yang dicadangkan ialah untuk mengalih keluar elemen animasi daripada dokumen dan memasukkan semula versi klon. Walaupun ia memulakan semula animasi dengan berkesan, ia memperkenalkan kerumitan yang tidak perlu dan isu prestasi yang berpotensi.

Reflow to the Rescue

Penyelesaian yang lebih elegan dan cekap terletak pada mencetuskan aliran semula . Reflow ialah proses di mana penyemak imbas mengira semula susun atur elemen sebagai tindak balas kepada perubahan dalam DOM atau CSS. Dengan mengeksploitasi tingkah laku ini, kami boleh menetapkan semula animasi dengan berkesan tanpa mengalih keluar elemen.

Kod JavaScript berikut menunjukkan pendekatan ini:

function reset_animation() {
  var el = document.getElementById('animated');
  el.style.animation = 'none';
  el.offsetHeight; /* trigger reflow */
  el.style.animation = null;
}

Sifat offsetHeight digunakan untuk mencetuskan aliran semula, memaksa penyemak imbas mengira semula reka letak dan menggunakan semula tetapan animasi. Ini dengan berkesan memulakan semula animasi serta-merta tanpa sebarang kelewatan atau rantaian yang menyusahkan.

Teknik ini boleh digunakan pada pelbagai animasi CSS3 dan boleh disepadukan dengan mudah ke dalam mana-mana aplikasi atau rangka kerja web. Ia menyediakan cara yang mudah tetapi berkesan untuk memulakan semula animasi tanpa memperkenalkan kesan sampingan yang tidak diingini.

Atas ialah kandungan terperinci Bagaimana untuk Memulakan Semula Animasi CSS3 dengan Cekap Tanpa Penyingkiran Elemen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!