Looping CSS3 transition

Question

Я пытаюсь зациклить переход CSS3, идея состоит в том, чтобы добавить класс к элементу, чтобы начать переход, и прослушать событие перехода, когда событие запущено. Я удаляю класс и начинаю заново.

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

Это обычная моя работа, так как я выше.