Bagaimanakah Saya Boleh Jeda dan Sambung semula Animasi CSS3 Menggunakan JavaScript?

Jeda dan Sambung semula Animasi CSS3 dengan JavaScript

Memanipulasi animasi CSS3 secara dinamik menggunakan JavaScript menawarkan kawalan ke atas main balik kesan visual. Begini cara anda boleh menjeda dan menyambung semula animasi CSS3 tanpa pustaka luaran:

Sampel kod yang disediakan cuba menjeda dan menyambung semula animasi dengan mengubah sifat webkitAnimationPlayState. Walau bagaimanapun, beberapa percubaan mungkin gagal disebabkan oleh pengendali acara yang berterusan.

Kaedah Alternatif menggunakan Kelas CSS

Pendekatan yang lebih cekap ialah memanfaatkan kelas CSS untuk mengawal keadaan animasi . Begini rupa kod yang disemak semula:

HTML:

<!-- Add the paused class initially to pause the animations by default -->
<img>

CSS:

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

JavaScript:

function doStuff(){
    var pic1 = document.getElementById("pic1");
    var pic2 = document.getElementById("pic2");

    // Toggle the paused class to resume or pause the animation
    pic1.classList.toggle("paused");
    pic2.classList.toggle("paused");
}

Kaedah ini menghapuskan keperluan untuk menjeda secara eksplisit dan menyambung semula animasi dalam pengendali acara. Dengan menambah atau mengalih keluar kelas yang dijeda, anda boleh mengawal keadaan animasi dengan mudah.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Jeda dan Sambung semula Animasi CSS3 Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!