Wie kann ich CSS3-Animationen mit reinem JavaScript anhalten und fortsetzen?

So pausieren und fortsetzen Sie eine CSS3-Animation mit nativem JavaScript:

Diese Frage sucht nach einer Lösung für das Pausieren und Fortsetzen einer CSS3-Animation (Bild-Diashow). ) durch Anklicken von Bildern, ohne externe Bibliotheken. Der bereitgestellte Code versucht, dies zu bewältigen, indem er mehrere Animationen innerhalb einer Funktion anhält, stößt jedoch auf eine Einschränkung.

Um CSS3-Animationen mit einfachem JavaScript effektiv anzuhalten und fortzusetzen, sollten Sie die Verwendung einer CSS-Klasse in Betracht ziehen:

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

Durch Zuweisen oder Entfernen dieser Klasse zum animierten Element können Sie die Animation nach Bedarf anhalten oder fortsetzen:

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

Dieser Ansatz ermöglicht Es ermöglicht die gleichzeitige Steuerung mehrerer Animationen und sorgt für eine klarere Trennung der Belange zwischen CSS und JavaScript. Es stellt außerdem sicher, dass Klickereignisse die Animationen nicht beeinträchtigen.

Das obige ist der detaillierte Inhalt vonWie kann ich CSS3-Animationen mit reinem JavaScript anhalten und fortsetzen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!