CODEWITHSUNDEEP
jquerycsstransition
scooterlord
scooterlord

Reputation: 15369

Is there a way to prevent all actions while css transition takes place?

I am trying to disable every action until a transition that is triggered manually is finished.

I am using this simple code:

myelem.click(function() {
   myotherelem.addClass('transition');
};

and then...

myelem.on('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function() {
   // I am done!
});

What I am looking for is for a way to disable all activity, either click, touch, anything at all until the animation finishes. Any ideas?

Upvotes: 4

Views: 2921

Answers (2)

Alexander Orlov
Alexander Orlov

Reputation: 79

dropdownMenusUl.on('transitionstart', function() {
        jQuery(this).css('pointer-events', 'none');
});

dropdownMenusUl.on('transitionend', function() {
        jQuery(this).css('pointer-events', 'all');
});

Upvotes: 0

Matheus
Matheus

Reputation: 839

If by "all actions triggered manually" you mean click's, then applying "pointer-events: none" to all painted elements should to the job.

JS:

myelem.click(function() {
    myotherelem.addClass('transition');
    body.addClass('freeze');
};

myelem.on('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function() {
    // I am done!
    body.removeClass('freeze')
});

CSS:

.freeze {
   pointer-events:none;
}

Upvotes: 2

Related Questions