CSS3 webkitAnimationEnd упорядочение событий - PullRequest
Новая
       20

CSS3 webkitAnimationEnd упорядочение событий

1 голос
/ 21 июля 2011

Я новичок в stackoverflow, а также относительно нов в программировании на HTML5.Я пишу что-то (в первую очередь для Safari), где логика определяется событиями, которые запускаются, когда анимация веб-комплекта завершается.Если я запускаю несколько анимаций одинаковой длины одновременно, мне нужно некоторое представление о порядке, в котором я могу ожидать, что их события завершения будут запущены.Пример: 

<!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) запускаю анимации, чтобы переместить их вправо и распечатать на консоликогда они закончатСиний квадрат всегда первым говорит, что он закончил анимацию.Кажется, что от игры вокруг не имеет ничего общего с порядком, в котором были запущены анимации, или с положением квадратов, но с порядком, в котором они созданы.«Одновременные» обратные вызовы событий, по-видимому, происходят вначале с последним созданным элементом, а затем с более старыми элементами.

Мой вопрос: могу ли я положиться на это поведение?Гарантируется ли это в каких-либо стандартах или может изменяться в зависимости от браузера или фазы луны?Если порядок событий не может быть гарантирован, какие стратегии вы бы порекомендовали для этого?

1 Ответ

0 голосов
/ 26 июля 2011

Я могу сказать, что это, вероятно, зависит от системы. Я использую OSX Lion, и в Chrome и Safari «красное» событие регистрируется перед «синим».

Если вы хотите взломать его, чтобы быть более уверенным в сроках, сделайте что-то вроде этого: 

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

Можно подумать, что вы могли бы установить функцию тайм-аута на myRedFoo.startAnim, но это препятствует регистрации сообщений.

Я все еще могу представить себе потенциальные проблемы с синхронизацией, так что это не доказательство.

...