0

我对 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 代码，看看有时会发生，有时不会。

有谁知道是什么导致了这种行为？

PS它似乎有时在Safari中发生，总是在Chrome中，几乎从不在Firefox中......

4

1 回答 1

1

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

如果您更改逻辑以延迟对 moveEm() 的调用或事件绑定（如您在评论中提到的那样），您的 transitionEnd 事件将按预期触发工作小提琴：

window.setTimeout(moveEm, 10);
于 2013-08-05T19:24:26.383 回答