CODEWITHSUNDEEP
jqueryhtmlcssfirefoxcss-transitions
harryfino
harryfino

Reputation: 455

The transitionend event is not firing consistently in FireFox without overflow hidden

I'm running into an issue on Firefox (v20.0.1) where it will not fire the transitionend event consistently. If I keep the overflow: hidden style on the animating div, it works fine.

I created an example to illustrate: http://codepen.io/harryfino/full/jphis

This example works fine in Chrome and IE10, but in Firefox you won't see the transitionend event fired on the second click. Then on the third click, it will fire twice and both elements will be hidden. If you comment out the page.removeClass('is-animating') line, it fires the event properly.

Back story on the removing overflow: hidden: the actual code has divs that overflow out of the containers and cannot be hidden.

I want to know why it's not firing the event on the second click, and as a bonus, why the overflow: hidden is effecting that.

Upvotes: 4

Views: 2079

Answers (1)

miphe
miphe

Reputation: 1863

As @Orchestrator suggested, this will hopefully solve your problem.

This is a common bug in firefox. I think it's because of adding two classes in the same time. The solution is very simple - just wrap the addClass methods in timeout:

setTimeout( function(){
 if (direction === 'in') {
   container.addClass('is-drilled-in');
 } else {
   container.removeClass('is-drilled-in');
 }
}, 50);

As answered by Nikola Boychev @ codersclan

Upvotes: 2

Related Questions