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

这是代码的小提琴

问题是它只在第一次运行时,第二次添加类时永远不会触发事件.

有没有其他方法来循环过渡？

Answer 1

在再次添加类之前,浏览器没有机会删除该类,因此它不会重置该样式.延迟1毫秒修复它...

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

修改了jsFiddle链接

注意:

你可以transition作为参数传递给超时调用,就像这样......

setTimeout(transition, 1);

如上所述,这只是我的习惯.