3
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 for firefox transition is not happening. Can someone tell me what is the root cause or problem here.

5
  • transitionend event seems to work fine in Firefox... see jsfiddle.net/r2Wat/2 Could you fill a jsfiddle too reproducing the issue? Commented Mar 12, 2012 at 10:31
  • Maybe a little late, but I faced the same problem. The above solution works. However, you have to take care of where you put the .addEventListener call; to ensure the DOM was generated, I've used it in a $(document).ready(function() {}); (as I am working with jQuery).
    – Michael A.
    Commented Aug 5, 2012 at 8:32
  • @FabrizioCalderan I have the same problem. It is not working for me. See here jsfiddle.net/rGECn/2 in FF 15.0.1 Commented Sep 21, 2012 at 1:33
  • I have a similar issue. But I noticed @Behrang that your jsfiddle is using the wrong prefix for firefox transitions.
    – Joey Blake
    Commented Sep 21, 2012 at 4:12
  • Did you know transitionend isn't supposed to always fire? see: stackoverflow.com/a/16324877/261114 Commented May 1, 2013 at 19:21

2 Answers 2

10

The transitionend event and it's prefixed variants do NOT trigger if the transition is interrupted.

From the W3C spec:

The transitionend event occurs at the completion of the transition. In the case where a transition is removed before completion, such as if the transition-property is removed, then the event will not fire.

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

0
0

The transitioncancel event exists, so you could try to add the following snippet also:

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

It is not explained in the other upvoted answer that this exists.

https://developer.mozilla.org/en-US/docs/Web/API/Element/transitioncancel_event

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.