Bagaimana untuk Memulakan Semula Animasi CSS3 Dengan Lancar Tanpa Jitter?

Cara Memulakan Semula Animasi CSS3 dengan Lancar

Jika anda mempunyai animasi CSS3 yang perlu dimulakan semula apabila pencetus seperti satu klik, anda' Akan menghadapi dilema: secara berterusan menskalakannya ke sana ke mari boleh menyebabkan kelewatan dan kerumitan. Walaupun mengalih keluar dan memasukkan semula elemen animasi boleh berfungsi, ia berbaloi untuk meneroka penyelesaian yang lebih elegan.

Nasib baik, terdapat teknik menggunakan aliran semula yang boleh memberikan tetapan semula yang lancar. Dengan melumpuhkan sementara animasi, memaksa aliran semula, dan kemudian mendayakannya semula, anda boleh memulakan semula animasi dengan berkesan tanpa sebarang kelewatan atau gangguan. Begini cara ia berfungsi:

function reset_animation() {
  var el = document.getElementById('animated');
  el.style.animation = 'none'; // Temporarily disable animation
  el.offsetHeight; // Force reflow
  el.style.animation = null; // Re-enable animation
}

Pendekatan ini memanfaatkan gelagat penyemak imbas untuk mengira semula aliran dokumen (aliran semula) apabila sifat tertentu berubah. Dengan melumpuhkan dan mendayakan semula animasi, anda memaksa penyemak imbas untuk memulakan semula sifat animasi, memulakannya semula dengan berkesan.

Ingat, teknik ini tidak terhad kepada jQuery atau Move.js; anda boleh menggunakannya dengan mana-mana animasi CSS. Jadi, pada kali seterusnya anda perlu memulakan semula animasi CSS, pertimbangkan untuk menggunakan kaedah berasaskan aliran semula ini untuk penyelesaian yang lancar dan cekap.

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