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>

元素绝对位于彼此相邻的水平线上。现在我想将它们向左滑动，直到第一个项目不在视线范围内。然后我可以删除第一个项目并继续翻译其余的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代码，看看有时会发生这种情况，有时则不然。

有人知道造成这种行为的原因吗？

P.S。似乎有时会在Safari中出现，总是在Chrome中，而且几乎从不在Firefox中......

Answer 1

在这种情况下，因为您正在调用moveEm inline，所以您正在有效地监听transitionEnd事件，转换时间为0ms。

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

window.setTimeout(moveEm, 10);

Transitionend在转换之前调用甚至完成了吗？

1 个答案: