Transitionend называется до перехода даже закончен?

Question

Я полностью озадачен, казалось бы, случайным поведением события перехода. Я пытаюсь создать функциональность с тикетами с тикетами с CSS3. Я поместил ядро ​​кода в неправильный код jsFiddle. Вот HTML для тестирования:

<div class="container"> 
    <div class="el" id="el1">Text 1</div> 
    <div class="el" id="el2">Text 2</div> 
    <div class="el" id="el3">Text 3</div> 
</div> 

Элементы все абсолютно расположены на горизонтальной линии рядом друг с другом. Теперь я хочу сдвинуть их влево, пока первый элемент не исчезнет из виду. Затем я смогу удалить этот первый элемент и продолжить перевод для остальных разделов.

var moveEm = function() { 
    var elements = $(".el"); 
    var firstEl = $(".el").first(); 

    firstEl.on("webkitTransitionEnd oTransitionEnd otransitionend transitionend msTransitionEnd", function(e){ 
    $(".el").first().remove(); 

    $(".el").each(function() { 
     $(this).css("left", $(this).position().left); 
     $(this).css({ transform: "none", transition: "none"}); 
    }); 

    moveEm(); 
    }); 

    elements.css({ transform: "translate(-100px,0px)", transition: "all 500ms linear"}); 
}; 

moveEm(); 

Однако часто, как transitionend пожары для первого элемента (как и ожидалось), но и для второго (а иногда и третий) сразу, как хорошо! Попробуйте код jsFiddle и посмотрите, что это иногда происходит, а иногда и нет.

Кто-нибудь знает, что вызывает подобное поведение?

P.S. Кажется, что это случается иногда в Safari, всегда в Chrome и почти никогда в Firefox ...

Answer 1

В этом случае, поскольку вы вызываете встроенную строку moveEm, вы эффективно слушаете событие переходаEnd со временем перехода 0ms.

Если вы измените свою логику либо отложить вызов moveEm() или связывания (как вы упомянули в комментариях) ваши transitionEnd события событие будет срабатывать, как и ожидалось Working fiddle:

window.setTimeout(moveEm, 10);