Firefox does not raise event for transition

Question

document.getElementById("mylogo").addEventListener( 'webkitTransitionEnd', function( event ) { document.getElementById("mylogotext").className = "mylogoText_visible_style"; }); document.getElementById("mylogo").addEventListener( 'transitionend', function( event ) { document.getElementById("mylogotext").className = "mylogoText_visible_style"; }); 

---

 .mylogoText_style { position:absolute; left:-350px; top:105px; opacity:0; z-index:1; } .mylogoText_visible_style{ position:absolute; left:59px; top:105px; opacity:1; z-index:1; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -webkit-transition: all 1s ease-in-out 0s; -moz-transition: all 1s ease-in-out 0s; } 

Here the problem is when I try to switch to firefox, the transition does not happen. Can someone tell me what is the main cause or problem here.

Answer 1

The transition event and its prefix variants DO NOT fire if the transition is interrupted.

From the W3C specification:

The transition event occurs when the transition is completed. If the transition is deleted before completion, for example, if the transition property is deleted, the event will not fire.

How CSS transitions work at the browser level (see http://www.w3.org/TR/css3-transitions/#reversing ) is that if the animation is interrupted by some property change, it is "reset" by executing in the reverse order or in some cases completely ignored. This may be useful to know, as this may eliminate the need for a transition in most projects.