Maison >interface Web >tutoriel CSS >Comment suspendre et reprendre les animations CSS3 avec du JavaScript pur ?

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

Linda Hamilton
Linda Hamiltonoriginal
2024-12-05 15:02:11291parcourir

How to Pause and Resume CSS3 Animations with Pure JavaScript?

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn