CODEWITHSUNDEEP
javascriptjquerycss
tommueller
tommueller

Reputation: 2496

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

Upvotes: 4

Views: 4808

Answers (1)

nkmol
nkmol

Reputation: 8091

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:

var AnimationComplete;

$('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);    
    return false; /*Cancel any bubbling*/
});

I have to say it is a BAD practice 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.

Upvotes: 2

Related Questions