In dem folgenden Code versuche ich drei Funktionen zu loopen, die nur feuern, sobald die vorherige Funktion abgeschlossen ist, wobei die letzte Funktion dann die erste aufruft, um den Prozess erneut zu starten. Die Verwendung von setInterval/setTimout sind keine guten Antworten dafür, weil RequestAnimationFrame ihren Platz als sauberere Methode einnimmt, aber ich weiß nicht, wie man RequestAnimationFrame auf diesen Code anwendet. Auch die Frage, warum die dritte Funktion nicht die erste aufruft, würde auch mit diesen beiden Methoden nicht beantwortet werden.JS AnimationEnd Loop, möchte kontinuierlich Schleife ohne Verwendung; setInterval/setTimout
<body onload="runOne()">
function runOne(){
var x = document.getElementById("rightBox");
document.getElementById("rightBox").style.animation = "scrollTextTwo 10s";
x.addEventListener("animationend",runTwo);
};
function runTwo(){
var x = document.getElementById("rightBoxTwo");
document.getElementById("rightBoxTwo").style.animation = "scrollTextTwo 10s";
x.addEventListener("animationend",runThree);
};
function runThree(){
var x = document.getElementById("rightBoxThree");
document.getElementById("rightBoxThree").style.animation =
"scrollTextTwo 10s";
x.addEventListener("animationend",runOne);
};
Der obige Code funktioniert nur einmal, wird es alle drei Funktionen spielen/animieren, aber dann stoppt nach „runThree()“ ist abgeschlossen. Ich würde gerne wissen, wie "runThree()" kann "runOne()" aufrufen, sobald drei ausgeführt wird mit seiner Animation abgeschlossen?
Wie würde "Animation: keine" im Code aussehen? Ich bin nicht vertraut mit dem Zurücksetzen der Animation. – Ghoyos
Einfach so: '' document.getElementById ("rightBox"). Style.animation = "keine"; '' Ich habe meinem Beitrag auch ein funktionierendes Beispiel in Codepen hinzugefügt. schau es dir an, um zu sehen, wie es genau funktioniert :) – ScientiaEtVeritas
Danke dir so sehr! werde jetzt in deinen Code-Stift tauchen !! – Ghoyos