Comment suspendre et reprendre les animations CSS3 avec du JavaScript pur ?

Comment suspendre et reprendre une animation CSS3 à l'aide de JavaScript natif :

Cette question cherche une solution pour suspendre et reprendre une animation CSS3 (diaporama d'images ) en cliquant sur des images, sans bibliothèques externes. Le code fourni tente de gérer cela en suspendant plusieurs animations à partir d'une fonction, mais il rencontre une limitation.

Pour suspendre et reprendre efficacement les animations CSS3 avec du JavaScript simple, envisagez d'utiliser une classe CSS :

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

En attribuant ou en supprimant cette classe de l'élément animé, vous pouvez mettre en pause ou reprendre l'animation selon vos besoins :

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

Cette approche permet de contrôler plusieurs animations simultanément et offre une séparation plus nette des préoccupations entre CSS et JavaScript. Cela garantit également que les événements de clic n'interfèrent pas avec les animations.

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!