Comment puis-je suspendre et reprendre les animations CSS3 à l'aide de JavaScript ?

Suspendre et reprendre l'animation CSS3 avec JavaScript

La manipulation dynamique des animations CSS3 à l'aide de JavaScript offre un contrôle sur la lecture des effets visuels. Voici comment suspendre et reprendre les animations CSS3 sans bibliothèques externes :

L'exemple de code fourni tente de suspendre et de reprendre les animations en modifiant la propriété webkitAnimationPlayState. Cependant, plusieurs tentatives peuvent échouer en raison de gestionnaires d'événements en cours.

Méthode alternative utilisant la classe CSS

Une approche plus efficace consiste à exploiter une classe CSS pour contrôler l'état de l'animation. . Voici à quoi ressemblerait le code révisé :

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");
}

Cette méthode élimine la nécessité de suspendre et de reprendre explicitement l'animation dans les gestionnaires d'événements. En ajoutant ou en supprimant la classe en pause, vous pouvez facilement contrôler l'état de l'animation.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!