Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

The transitionend event is not firing consistently in FireFox without

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.

Note: This questions has been copied from Stack Overflow. It was posted a few months ago and still not answered. Posted by harryfino. The bounty is provided by CodersClan.

User Gravatar

CodersClan

Posted Jul 25 2013 19:10 UTC

$10


  • Assigned To NBoychev
  • Solved
  • javascript
    firefox
  • 2120 Views

1 Replies


Hello,

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);

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted Jul 25 2013 20:13 UTC

Solution

This didn't solve your task? Get your own custom solution.

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions