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? 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.
    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
    – Behrang
    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
    Sep 21, 2012 at 4:12
  • Did you know transitionend isn't supposed to always fire? see: stackoverflow.com/a/16324877/261114 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

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

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

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