Bagaimana untuk Memulakan Semula Animasi CSS3 dengan Berkesan?

Memulihkan Animasi CSS3 Dengan Berkesan

Memulakan semula animasi CSS3 boleh menjadi tugas yang mencabar. Soalan ini mengkaji situasi di mana bar dianimasikan menggunakan transformasi skalaY(0) untuk menggambarkan masa yang tinggal, dan timbul keperluan untuk menetapkan semula animasi kepada skalaY(1) sebelum menyambung semula ke skalaY(0).

Walaupun pada mulanya cuba untuk menetapkan semula animasi dengan menetapkan skalaY(1) terbukti tidak berkesan, soalan mengemukakan penyelesaian yang menarik untuk mengalih keluar dan memasukkan semula klon elemen animasi ke mulakan semula animasi. Walau bagaimanapun, kaedah ini mungkin bukan pendekatan yang paling cekap atau mudah.

Daripada bergantung pada penyingkiran dan pemasukan semula elemen, penyelesaian yang lebih praktikal adalah dengan menggunakan teknik pengaliran semula. Teknik ini melibatkan mengalih keluar sementara gaya animasi, mencetuskan aliran semula untuk menggunakan perubahan, dan kemudian menetapkan semula gaya animasi. Dengan memasukkan fungsi JavaScript berikut ke dalam kod:

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

kemudian mencetuskan fungsi ini pada acara (seperti klik butang), animasi boleh ditetapkan semula dengan berkesan. Pendekatan ini menyediakan kaedah yang mudah dan cekap untuk memulakan semula animasi CSS3.

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