JavaScript-Magie: CSS-Animationen steuern mit getAnimations()
JavaScript-Magie: CSS-Animationen steuern mit getAnimations()
Hallo zusammen! Heute schauen wir uns eine coole, aber vielleicht weniger bekannte JavaScript-Methode an: document.getAnimations(). Wofür ist die gut?
Ganz einfach: Sie findet nicht HTML-Elemente (wie getElementById), sondern alle laufenden CSS-Animationen auf einer Seite. Das ist extrem nützlich, wenn man Animationen zur Laufzeit pausieren, abspielen oder analysieren möchte.
Lasst uns das an einem praktischen Beispiel ausprobieren: Wir lassen ein Buch wackeln und steuern diese Animation mit einem Knopf.
Unser praktisches Beispiel: Das wackelnde Buch
Das Ergebnis (Live-Beispiel)
Klick auf den Knopf, um die Animation zu stoppen und zu starten!
Der Code: Wie funktioniert das?
Hier ist der vollständige Code, den du in eine eigene HTML-Datei packen kannst, um das Beispiel oben nachzubauen. Das Live-Ergebnis siehst du direkt hier drüber!
<!DOCTYPE html>
<html>
<head>
<style>
/* 1. Das "Buch" (Element, das wir animieren) */
#buch {
width: 100px;
height: 140px;
background-color: steelblue;
border: 2px solid black;
margin: 30px;
/* 2. Die Animation wird hier angewendet */
animation: wackeln 2s infinite;
}
/* 3. Die @keyframes definieren, WAS die Animation tut */
@keyframes wackeln {
0% { transform: rotate(0deg); }
25% { transform: rotate(5deg); }
50% { transform: rotate(0deg); }
75% { transform: rotate(-5deg); }
100% { transform: rotate(0deg); }
}
</style>
</head>
<body>
<h2>Beispiel für getAnimations()</h2>
<!-- Das animierte Element -->
<div id="buch">Mein Buch</div>
<!-- Der Knopf, der die JavaScript-Funktion aufruft -->
<button onclick="toggleAnimation()">Pause / Start</button>
<script>
// 4. Das JavaScript
function toggleAnimation() {
// Finde zuerst das HTML-Element (das Buch)
let buchElement = document.getElementById('buch');
// JETZT benutzen wir die Methode:
// Finde ALLE Animationen, die NUR auf diesem Element laufen
let animationen = buchElement.getAnimations();
if (animationen.length > 0) {
// Nimm die erste gefundene Animation
let buchAnimation = animationen[0];
// Prüfe den aktuellen Status der Animation
if (buchAnimation.playState === 'running') {
// Wenn sie läuft, pausiere sie
buchAnimation.pause();
} else {
// Wenn sie pausiert ist, starte sie
buchAnimation.play();
}
} else {
alert('Keine Animation auf diesem Element gefunden!');
}
}
</script>
</body>
</html>
Aufschlüsselung des Codes
1. Das HTML
Das HTML ist super einfach. Wir haben nur ein <div> mit der ID "buch" und einen <button>, der bei einem Klick die Funktion toggleAnimation() aufruft.
2. Das CSS
Im <style>-Block passiert die Animations-Magie:
- Mit
@keyframes wackelndefinieren wir eine Animation, die das Element leicht hin und her dreht (transform: rotate(...)). - Dem
#buchweisen wir diese Animation zu:animation: wackeln 2s infinite;. Das bedeutet: Nutze die "wackeln"-Animation, lass sie 2 Sekunden dauern und wiederhole sie unendlich (infinite).
3. Das JavaScript (Der Kern!)
Hier kommt unsere neue Methode ins Spiel. Schauen wir uns die Funktion toggleAnimation() genau an:
// Finde zuerst das HTML-Element (das Buch)
let buchElement = document.getElementById('buch');
Das kennen wir schon. Wir brauchen das Element, von dem wir die Animationen wissen wollen.
// Finde ALLE Animationen, die NUR auf diesem Element laufen
let animationen = buchElement.getAnimations();
Das ist der wichtige Schritt! Wir rufen .getAnimations() direkt auf unserem buchElement auf. (Man könnte es auch auf document aufrufen, um ALLE Animationen der Seite zu bekommen). Das Ergebnis animationen ist eine Liste (ein Array) aller laufenden Animationen auf diesem Element.
if (animationen.length > 0) {
// Nimm die erste gefundene Animation
let buchAnimation = animationen[0];
Wir prüfen, ob überhaupt Animationen gefunden wurden. Wenn ja, schnappen wir uns die erste aus der Liste (animationen[0]), da wir ja wissen, dass nur eine läuft.
// Prüfe den aktuellen Status der Animation
if (buchAnimation.playState === 'running') {
// Wenn sie läuft, pausiere sie
buchAnimation.pause();
} else {
// Wenn sie pausiert ist, starte sie
buchAnimation.play();
}
}
Das gefundene Animations-Objekt (buchAnimation) hat super nützliche Eigenschaften und Methoden. Wir prüfen die Eigenschaft .playState. Wenn sie 'running' ist, rufen wir die .pause()-Methode auf. Andernfalls (wenn sie z.B. 'paused' ist), rufen wir .play() auf.
Fazit
Und das war's! Mit getAnimations() kannst du laufende Animationen "fangen" und sie dann mit Methoden wie .pause(), .play(), .cancel() oder .reverse() vollständig kontrollieren.
Es ist ein mächtiges Werkzeug für dynamische und interaktive Webseiten. Viel Spaß beim Ausprobieren!
Arabic
French
Spanish
Portuguese
Deutsch
Turkish
Dutch
Italiano
Russian
Romaian
Portuguese (Brazil)
Greek