在转换完成之前调用Transitionend？答案

【问题标题】：Transitionend called before transition even finished?在转换完成之前调用Transitionend？
【发布时间】：2013-08-06 14:11:40
【问题描述】：

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();

然而，transitionend 通常会触发第一个项目（如预期的那样），但也会立即触发第二个（有时是第三个）！试试 jsFiddle 代码，看看有时会发生，有时不会。

有人知道导致这种行为的原因吗？

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

【问题讨论】：

标签： jquery css css-transitions jquery-events

【解决方案1】：

在这种情况下，因为您是内联调用 moveEm，所以您实际上是在以 0 毫秒的转换时间侦听 transitionEnd 事件。

如果您更改逻辑以延迟对 moveEm() 的调用或事件绑定（如您在 cmets 中提到的），您的 transitionEnd 事件将按预期触发Working fiddle：

window.setTimeout(moveEm, 10);

【讨论】：