JS AnimationEnd Loop，想不断循环使用; setInterval / setTimout [英] JS AnimationEnd Loop, would like to loop continually WITHOUT using; setInterval/setTimout
问题描述
在下面的代码中，我试图循环三个函数，只有在前一个函数完成时才触发，最后一个函数调用第一个函数重新启动过程。使用setInterval / setTimout不会是好的答案，因为RequestAnimationFrame取代他们的地方作为一个干净的做事的方式，但我不知道如何应用RequestAnimationFrame到这个代码。另外，为什么第三个函数不调用第一个函数也不能通过使用这两个方法来回答。
In the below code I am trying to loop three functions that only fire once the previous function is complete, with the last function then calling the first to start the process all over again. Using setInterval/setTimout are not going to be good answers for this because of RequestAnimationFrame taking their place as a cleaner way of doing things but I dont know how to apply RequestAnimationFrame to this code. Also the question of why the third function does not call the first wouldn't be answered by using those two methods as well.
<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);
};
上面的代码只工作一次，它将播放/动画所有三个函数，然后停止runThree （） 做完了。我想知道如何runThree（）可以调用runOne（）一次运行三是完成其动画？
The above code works only once, it will play/animate all three functions but then stops after "runThree()" is complete. I would like to know how "runThree()" can call "runOne()" once run three is completed with its animation?
推荐答案
p>所以，我想你有几个选择：可以工作是重置 rightBox 在中的动画 runTwo animation：none 。如果你分配 scrollTextTwo 10s 回到 rightBox ，它应该再次开始。
So, I think you have several options: What could work is that you reset the the animation of rightBox in function runTwo with animation: none. If you assign scrollTextTwo 10s back to the rightBox it should start again. Equivalent for the other ones.
请参阅以下 Codepen ，其中使用JavaScript实现了一个无尽的CSS动画。
See the following Codepen, where I implemented an endless CSS animation using JavaScript.
或者，也可以不使用JavaScript： animation-delay ，无限重复和一些其他的技巧来创建真正复杂的动画时间轴，也可以看看问题。
Alternatively it's also possible to do it without JavaScript: You can use animation-delay, infinite repeating and some other tricks to create really complex animation timelines, maybe also take a look at the following question.
这篇关于JS AnimationEnd Loop，想不断循环使用; setInterval / setTimout的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
