CSS3 webkitAnimationEnd事件排序

时间:2011-07-21 11:30:00

标签: javascript-events css3 webkit html5-animation

我是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”事件回调似乎首先出现在最近创建的元素上,然后是旧元素。

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

1 个答案:

答案 0 :(得分:0)

我可以说这可能是系统依赖的。我使用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,但这样可以防止记录消息。

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