循环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); 

这只是我这样做的一种习惯，以上。