1
私は、stackoverflowには新しく、HTML5プログラミングには比較的新しいです。私は、Webkitのアニメーションが完了したときに発動するイベントによってロジックが駆動されるものを（主にSafari用に）書いています。同じ長さのアニメーションを同時に開始すると、完了イベントが発生すると予想できるオーダーを知る必要があります。例：CSS3 webkitAnimationEndイベントの注文
<!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>
だから、私は右に移動するアニメーションをキックオフ（SafariとChromeの）赤の広場やJavaScriptで青い四角などを作成しています、とするとき、彼らは、コンソールに印刷しますやり直し青い四角は、常にアニメーションが完成したと言う最初のものです。周りを遊ぶことから、アニメーションが開始された順序や四角形の位置とは関係ないように見えますが、作成される順番は異なります。 「同時」イベントコールバックは、最近作成された要素で最初に発生し、その後に古い要素が続くように見えます。
私はこの動作に頼ることができますか？どの標準でも保証されているのですか、それともブラウザーや月の位相によって変わるのでしょうか？イベントの順序が保証できない場合は、それに対処するためにどのような戦略をお勧めしますか？