Find Out If Any Transition Is In Progress

Is there anyway to find out if there currently is a transition running on my page? Not on a specific element but globally for the whole page? Thanks

Solution 1:

To see when a css transition has ended you can use transitionend.

The transitionend event is fired when a CSS transition has completed.

source: https://developer.mozilla.org/en-US/docs/Web/Reference/Events/transitionend

Where you can just use 'flags' to see when the animation has completed and when not. Here an example:

varAnimationComplete;

$('div').click(function() {
    $(this).addClass('green');
    AnimationComplete= false;
    console.log(AnimationComplete);
});

$("*").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function() {
    AnimationComplete= true;
    alert('animate ended');
    console.log(AnimationComplete);    
    returnfalse; /*Cancel any bubbling*/
});

I have to say it is a BADpractice to use the * selector, as it will bind these event[s] to all the element. It is better to write your specific elements in there.

jsFiddle

Update

So basically how you determ that a transition is in progress is when my 'flag' AnimionComplete is false.

jsFiddle

Here can you see 3 different states: start, in progress and end.