我是 Stack Overflow 的新手，也是 HTML5 编程的新手。我正在写一些东西(主要是针对 Safari)，其中逻辑由 webkit 动画完成时触发的事件驱动。如果我同时启动多个相同长度的动画，我需要了解它们的完成事件触发的顺序。示例:
<!DOCTYPE html>
<html>
<head>
<style>
@-webkit-keyframes slideRight {
from { left: 0; }
to { left: 100px; }
}
</style>
</head>
<body>
<script type="text/javascript">
var square = function(yPos, color){
var myDiv = document.createElement("div");
myDiv.style.width = "20px";
myDiv.style.height = "20px";
myDiv.style.top = yPos + "px";
myDiv.style.backgroundColor = color;
myDiv.style.position = "absolute";
document.body.appendChild(myDiv);
var squareInterface = {
onAnimEnd: function(event){
console.log(myDiv.style.backgroundColor + " square finished animating");
},
startAnim: function(){
myDiv.style.webkitAnimationName = "slideRight";
myDiv.style.webkitAnimationDuration = "2s";
myDiv.addEventListener('webkitAnimationEnd', this.onAnimEnd);
}
}
return squareInterface;
}
var myRedFoo = square(0, "red");
var myBlueFoo = square(30, "blue");
myRedFoo.startAnim();
myBlueFoo.startAnim();
</script>
</body>
</html>
因此，我在 JavaScript 中创建了一个红色方 block 和一个蓝色方 block ，并(在 Safari 和 Chrome 中)启动动画以将它们向右移动，并在完成后打印到控制台。蓝色方 block 总是第一个说它已完成动画。从玩玩来看，它似乎与动画开始的顺序或方 block 的位置无关，而是与它们的创建顺序无关。 “同时”事件回调似乎首先发生在最近创建的元素上，然后是较旧的元素。
我的问题是我可以依赖这种行为吗？它是否在任何标准中得到保证，或者它是否可能根据浏览器或月相而改变？如果无法保证事件顺序，您会推荐哪些策略来应对？
最佳答案
我可以说这可能是系统相关的。我使用的是 OSX Lion，在 Chrome 和 Safari 中，“红色”事件在“蓝色”事件之前被记录。
如果您想破解它以便对时间更有信心，请执行以下操作:
function startRedFoo(){ myRedFoo.startAnim() };
myBlueFoo.startAnim();
setTimeout(startRedFoo, 10); //Ten is as small as you can go.
您可能认为您可以将超时函数设置为 myRedFoo.startAnim，但这会阻止消息被记录。
虽然我仍然可以想象这可能存在时间问题，所以它不是万无一失的。
关于CSS3 webkitAnimationEnd 事件排序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6775318/