Question

我是stackoverflow的新手，也是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中创建一个红色正方形和一个蓝色方块，并且（在Safari和Chrome中）启动动画以将它们移动到右侧，并在完成后打印到控制台。蓝色方块总是第一个说它完成了动画。从游戏开始，它似乎与动画的开始顺序或方块的位置无关，而与它们的创建顺序无关。 “Simultaneous”事件回调似乎首先出现在最近创建的元素上，然后是旧元素。

我的问题是我能依靠这种行为吗？是否有任何标准保证，或者它可能会根据浏览器或月亮的相位而改变？如果无法保证事件顺序，您会建议采取什么策略来应对？

Answer 1

我可以说这可能是系统依赖的。我使用OSX Lion，在Chrome和Safari中使用了＃34; red＆＃34;事件在＆＃34; blue＆＃34;之前记录之一。

如果你想破解它以便你对时间更有信心，可以这样做：

function startRedFoo(){ myRedFoo.startAnim() };
myBlueFoo.startAnim();
setTimeout(startRedFoo, 10); //Ten is as small as you can go.

您会认为您可以将超时功能设置为myRedFoo.startAnim，但这样可以防止记录消息。

我仍然可以想象这个潜在的时间问题，所以它不是万无一失的。

CSS3 webkitAnimationEnd事件排序

1 个答案: