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

CSS3-Animation mit JavaScript anhalten und fortsetzen

Problem:

So pausieren und fortsetzen eine CSS3-Animation mit JavaScript, ohne auf externe Ressourcen angewiesen zu sein Bibliotheken?

Lösung:

1. CSS-Animation:

Animation mithilfe von CSS-Keyframes definieren, Angabe der Deckkraftwerte und des Timings für jeden Schritt.

2. Pause und Fortsetzungsfunktionen:

Erstellen Sie JavaScript-Funktionen zum Anhalten und Fortsetzen der Animation:

const pauseAnimation = (element) => {
  element.style.animationPlayState = "paused";
};

const resumeAnimation = (element) => {
  element.style.animationPlayState = "running";
};

3. Ereignis-Listener:

Fügen Sie Ereignis-Listener zu den animierten Elementen hinzu, um das Anhalten und Fortsetzen auszulösen Aktionen:

document.getElementById("pic1").addEventListener("click", () => {
  pauseAnimation(document.getElementById("pic1"));
});

document.getElementById("pic2").addEventListener("click", () => {
  resumeAnimation(document.getElementById("pic2"));
});

Zusätzliche Hinweise:

• Um sicherzustellen, dass die Animation mehrmals angehalten werden kann, löschen Sie die vorhandenen Ereignis-Listener, bevor Sie neue hinzufügen.
• Alternativ können Sie den im bereitgestellten CSS-Klassenansatz vorgeschlagenen verwenden Antwort:

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

const pauseAnimation = (element) => {
  element.classList.add("paused");
};

const resumeAnimation = (element) => {
  element.classList.remove("paused");
};

Dadurch können Sie die Animation anhalten und fortsetzen, indem Sie einfach diese CSS-Klasse umschalten, ohne dass Ereignis-Listener erforderlich sind.

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