轉換之前調用的Transitionend甚至完成？

我對transitionend事件的表面上隨機的行爲完全感到困惑。我試圖用CSS3創建類似新聞動態的功能。我已將jsFiddle中出現錯誤的代碼核心。這裏是測試的HTML：轉換之前調用的Transitionend甚至完成？

<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代碼，看到這有時發生，有時不會。

有沒有人知道是什麼導致了這種行爲？

P.S.它似乎有時在Safari中發生，總是在Chrome中，幾乎從未在Firefox中發生過......

來源

2013-08-05 Pascal Lindelauf

在這種情況下，因爲您正在調用moveEm inline，所以您正在有效地以0ms的轉換時間來監聽transitionEnd事件。

window.setTimeout(moveEm, 10);

：如預期 Working fiddle

如果你改變你的邏輯要麼推遲調用moveEm（）或事件綁定（如你在評論中提到）你transitionEnd事件將被觸發

來源

2013-08-05 19:24:26 dc5

轉換之前調用的Transitionend甚至完成？

回答

相關問題