Heim > Web-Frontend > CSS-Tutorial > Wie kann ich CSS3-Animationen mit JavaScript anhalten und fortsetzen?

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

Linda Hamilton
Freigeben: 2024-12-03 13:43:12
Original
432 Leute haben es durchsucht

How Can I Pause and Resume CSS3 Animations Using JavaScript?

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>
Nach dem Login kopieren

CSS:

.paused{
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused; 
    animation-play-state:paused;
}
Nach dem Login kopieren

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");
}
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage