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

CSS3-Animation mit JavaScript anhalten und fortsetzen

Das dynamische Bearbeiten von CSS3-Animationen mithilfe von JavaScript bietet Kontrolle über die Wiedergabe visueller Effekte. So können Sie CSS3-Animationen ohne externe Bibliotheken anhalten und fortsetzen:

Das bereitgestellte Codebeispiel versucht, Animationen anzuhalten und fortzusetzen, indem die webkitAnimationPlayState-Eigenschaft geändert wird. Mehrere Versuche können jedoch aufgrund laufender Ereignishandler fehlschlagen.

Alternative Methode mit CSS-Klasse

Ein effizienterer Ansatz besteht darin, eine CSS-Klasse zur Steuerung des Animationsstatus zu nutzen . So würde der überarbeitete Code aussehen:

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

Diese Methode eliminiert die Notwendigkeit, die Animation innerhalb der Ereignishandler explizit anzuhalten und fortzusetzen. Durch Hinzufügen oder Entfernen der pausierten Klasse können Sie den Animationsstatus einfach steuern.

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