Looping CSS3 transition

Question

I'm trying to loop a CSS3 transition, the idea is to add a class to the element to start the transition and listen to the transitionend event, when the event is fired I remove the class and start again.

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

Here is a fiddle with the code

The problem is that it only runs the first time, when the class is added a second time the event is never fired.

Is there any other way to loop a transition?

Whoever voted to close this question - please pay more attention in future. The problematic code is shown clearly above, and there is a link to show the problem at work. There's nothing wrong with this question. — Reinstate Monica Cellio
– Reinstate Monica Cellio, Commented Feb 6, 2014 at 14:59

Reinstate Monica Cellio · Accepted Answer · 2014-02-06 15:50:31Z

5

The browser is not getting chance to remove the class before you add it again, so it's not resetting the style. Putting a 1ms delay in fixes it...

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

Note:

You could pass transition as a parameter to the timeout call, like this...

setTimeout(transition, 1);

It's just a habit of mine to do it as I have above.

edited Feb 6, 2014 at 15:50

answered Feb 6, 2014 at 14:58

Reinstate Monica Cellio

26.2k6 gold badges54 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Looping CSS3 transition

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related