循環CSS3轉換

Question

我試圖循環一個CSS3轉換，其思想是向元素添加一個類以啓動轉換並偵聽transitionend事件，當事件被觸發時，我將該類刪除並重新開始。

var transition = function() { 
    // add class to start the transition 
    flipper.addClass('flipped'); 

    flipper.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() { 
     // remove class when transition is done 
     flipper.removeClass('flipped'); 
     transition(); 
    }); 
} 

這裏是一個fiddle with the code

的問題是，它只能運行在第一時間，上課的時候添加的事件從來沒有發射了第二次。

是否有任何其他方式來循環轉換？

Answer 1

瀏覽器在再次添加它之前沒有機會刪除該類，因此它不會重置樣式。在把它修復1ms的延遲......

flipper.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() { 
    // remove class when transition is done 
    $('#console').append('[removing class]'); 
    flipper.removeClass("flipped"); 
    setTimeout(function() { 
     transition(); 
    }, 1); 
}); 

Modified jsFiddle link

注：

你可以通過transition作爲參數傳遞給超時呼叫，像這樣...

setTimeout(transition, 1); 

這只是我這樣做的一種習慣，以上。