Check if element is being animated CSS3

Question

Is there any way to check if element is being animated?

But being animated not with jquery\'s animate, but with css3\'s transition..

The pro

Answer 1

When you change the left property of an element, you can associate a boolean value with it (using data() for instance) and set it to true to indicate a transition has started. Then, you can bind to the transition end event (which varies depending on the browser) and set the boolean value back to false from your handler to indicate the transition has ended.

The end result is something like:

yourElement.on(
    "transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd",
    function() {
        $(this).data("transitioning", false);  // Transition has ended.
    }
);

(Note the code above only has to run once.)

---

if (!yourElement.data("transitioning")) {
    // No transition active, compute new position.
    var theNewLeft = yourElement.position().left + 200;
    // Set new position, which will start a new transition.
    yourElement.data("transitioning", true).css("left", theNewLeft);
}