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

在再次添加类之前，浏览器没有机会删除该类，因此它不会重置该样式。延迟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);
});

<强> Modified jsFiddle link

注意：

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

setTimeout(transition, 1);

如上所述，这只是我的习惯。

循环CSS3过渡

1 个答案: