Comment puis-je suspendre et reprendre les animations CSS3 en utilisant uniquement JavaScript ?

Pause et reprise de l'animation CSS3 avec JavaScript

Problème :

Comment mettre en pause et reprendre une animation CSS3 utilisant JavaScript sans recourir à des outils externes bibliothèques ?

Solution :

1. Animation CSS :

Définir l'animation à l'aide d'images clés CSS, en spécifiant les valeurs d'opacité et le timing pour chaque étape.

2. Pause et fonctions de reprise :

Créez des fonctions JavaScript pour gérer la pause et la reprise de l'animation :

const pauseAnimation = (element) => {
  element.style.animationPlayState = "paused";
};

const resumeAnimation = (element) => {
  element.style.animationPlayState = "running";
};

3. Écouteurs d'événements :

Ajouter des écouteurs d'événements aux éléments animés pour déclencher la pause et la reprise actions :

document.getElementById("pic1").addEventListener("click", () => {
  pauseAnimation(document.getElementById("pic1"));
});

document.getElementById("pic2").addEventListener("click", () => {
  resumeAnimation(document.getElementById("pic2"));
});

Remarques supplémentaires :

• Pour vous assurer que l'animation peut être mise en pause plusieurs fois, effacez les écouteurs d'événements existants avant d'en ajouter de nouveaux.
• Vous pouvez également utiliser l'approche de classe CSS proposée dans le réponse :

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

const pauseAnimation = (element) => {
  element.classList.add("paused");
};

const resumeAnimation = (element) => {
  element.classList.remove("paused");
};

Cela vous permet de mettre en pause et de reprendre l'animation en basculant simplement cette classe CSS sans avoir besoin d'écouteurs d'événements.

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!