Bagaimana untuk Memulakan Semula Animasi CSS3 dengan Reflow?

Memulakan semula Animasi CSS3

Menghidupkan semula animasi CSS3 semasa interaksi pengguna ialah tugas biasa. Walaupun mengalih keluar dan memasukkan semula elemen animasi mungkin kelihatan berkesan, ia memperkenalkan kerumitan yang tidak perlu. Penyelesaian yang lebih halus muncul dengan memanfaatkan kuasa aliran semula untuk menetapkan semula animasi dengan lancar.

Reflow, proses memformat semula dan mengecat semula struktur dokumen, menyediakan mekanisme yang mudah untuk mengubah gaya tanpa mengganggu garis masa animasi. Dengan menetapkan secara ringkas sifat animasi kepada 'tiada' dan kemudian mencetuskan aliran semula, penyemak imbas mendapat isyarat untuk mengabaikan sebarang animasi yang sedang berjalan. Ini membolehkan perubahan gaya seterusnya berkuat kuasa serta-merta, memulakan semula animasi dengan berkesan.

Untuk menggambarkan, pertimbangkan coretan JavaScript berikut:

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

Apabila dicetuskan, fungsi ini menjeda animasi pada ' elemen animasi', memaksa pelayar mengecat semula, dan kemudian memulihkan sifat animasi kepada keadaan asalnya. Dengan mengelakkan kelewatan atau rantaian tugasan animasi, pendekatan ini memudahkan proses tetapan semula animasi, memastikan pengalaman visual yang lancar.

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