css - 过渡结束之前调用过Transitionend吗？

我对过渡事件的看似随机的行为完全感到困惑。我正在尝试使用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>

所有元素都绝对位于彼此相邻的水平线上。现在，我想将它们向左滑动，直到看不见第一项。然后，我可以删除该第一项，并继续进行其余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();

但是，通常情况下，过渡项会立即触发第一个项目（如预期的那样），还会立即触发第二个项目（有时是第三个项目）！尝试jsFiddle代码，看看这有时会发生，有时却不会。

有人知道是什么导致这种行为吗？

附言有时似乎在Safari中发生，总是在Chrome中发生，而在Firefox中几乎从未发生过...

最佳答案

在这种情况下，因为您是内联调用moveEm，所以您实际上是在以0ms的过渡时间监听transitionEnd事件。

如果您更改逻辑以延迟对moveEm（）的调用或事件绑定（如您在注释中所述），则您的transitionEnd事件将按预期Working fiddle触发：

window.setTimeout(moveEm, 10);