Transition event does not fire sequentially in FireFox without overflow hidden

Question

I am having a problem with Firefox (v20.0.1) where it will not fire the transition event sequentially. If I keep the overflow: hidden style in the animated 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 will not see the transition event that was fired in the second click. Then, on the third click, he will shoot twice, and both elements will be hidden. If you comment out the line page.removeClass('is-animating') , it will execute the event correctly.

Story about removing overflow: hidden : the actual code has divs that overflow from containers and cannot be hidden.

I want to know why it does not fire the event in the second click and as a bonus, why does overflow: hidden .

Answer 1

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

This is a common mistake in firefox. I think this is due to the addition of two classes at 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 Nicola Boychev @codersclan replied