CSS3 webkitAnimationEnd 事件排序答案

【问题标题】：CSS3 webkitAnimationEnd event orderingCSS3 webkitAnimationEnd 事件排序
【发布时间】：2011-07-21 11:30:00
【问题描述】：

我是 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 中创建了一个红色方块和一个蓝色方块，并且（在 Safari 和 Chrome 中）启动动画以将它们向右移动，并在它们完成后打印到控制台。蓝色方块总是第一个说它已完成动画。从玩来看，它似乎与动画开始的顺序或方块的位置无关，而是它们的创建顺序。 “同步”事件回调似乎首先发生在最近创建的元素上，然后是较旧的元素。

我的问题是我可以依赖这种行为吗？它是否在任何标准中得到保证，或者它可能会根据浏览器或月相而改变？如果无法保证事件顺序，您会推荐哪些应对策略？

【问题讨论】：

标签： css safari webkit dom-events html5-animation

【解决方案1】：

我可以说这可能取决于系统。我使用的是 OSX Lion，在 Chrome 和 Safari 中，“红色”事件在“蓝色”事件之前记录。

如果您想破解它以便对时间更有信心，请执行以下操作：

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

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

尽管如此，我仍然可以想象出潜在的时间问题，所以这不是万无一失的。

【讨论】：