Bagaimana untuk Menjeda dan Menyambung semula Animasi CSS3 dengan JavaScript Tulen?

Cara Menjeda dan Sambung semula Animasi CSS3 Menggunakan JavaScript Asli:

Soalan ini mencari penyelesaian untuk menjeda dan menyambung semula animasi CSS3 (tayangan slaid imej ) melalui mengklik imej, tanpa perpustakaan luaran. Kod yang disediakan cuba mengurus ini dengan menjeda berbilang animasi dari dalam fungsi, tetapi ia menghadapi had.

Untuk menjeda dan menyambung semula animasi CSS3 dengan berkesan dengan JavaScript biasa, pertimbangkan untuk menggunakan kelas CSS:

.paused {
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;
}

Dengan menetapkan atau mengalih keluar kelas ini daripada elemen animasi, anda boleh menjeda atau menyambung semula animasi sebagai diperlukan:

function toggleAnimation(element, pause) {
  pause ? element.classList.add('paused') : element.classList.remove('paused');
}

Pendekatan ini membolehkan untuk mengawal berbilang animasi secara serentak dan menyediakan pemisahan kebimbangan yang lebih bersih antara CSS dan JavaScript. Ia juga memastikan acara klik tidak mengganggu animasi.

Atas ialah kandungan terperinci Bagaimana untuk Menjeda dan Menyambung semula Animasi CSS3 dengan JavaScript Tulen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!