Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

TransitionEnd Event not firing?

Tags:

jquery

css

I have multiple elements that are animating at a (somewhat) duration each. I'm animating using CSS3 transitions, using the jQuery library and a transitionend helper function from David Walsh.

My issue is that the transitionEnd event is NOT being fired! (In Chrome & Firefox)

My code:

var $children = $container.find('.slideblock').children();

if(Modernizr.csstransitions && Modernizr.csstransforms3d) {

    if($.browser.webkit === true) {
        $children.css('-webkit-transform-style','preserve-3d')
    }

    $children.each(function(i){
        $(this).on(whichTransitionEvent,function () {
            $(this).remove();
        });
        $(this).show().css('animation','slideOutToRight ' + ((Math.random() / 2) + .5) + 's');
    });

}

Update

The whichTransitionEvent variable points to a self-executing function that returns a string containing the event name:

var whichTransitionEvent = (function (){
    var t;
    var el = document.createElement('fakeelement');
    var transitions = {
      'transition'       :'transitionEnd',
      'OTransition'      :'oTransitionEnd',
      'MSTransition'     :'msTransitionEnd',
      'MozTransition'    :'transitionend',
      'WebkitTransition' :'webkitTransitionEnd'
    }

    for(t in transitions){
        if( el.style[t] !== undefined ){
            return transitions[t];
        }
    }
} ());

console.log(whichTransitionEvent);        // returns "webkitTransitionEvent" in Chrome
console.log(typeof whichTransitionEvent); // returns "string"
like image 337
Martin Avatar asked Sep 03 '12 15:09

Martin


People also ask

What is Transitionend in Javascript?

The transitionend event is fired when a CSS transition has completed. In the case where a transition is removed before completion, such as if the transition-property is removed or display is set to none , then the event will not be generated.

What is Transitionend?

Definition and Usage. The transitionend event occurs when a CSS transition has completed. Note: If the transition is removed before completion, e.g. if the CSS transition-property property is removed, the transitionend event will not fire. For more information about CSS Transitions, see our tutorial on CSS3 Transitions ...

What is transition-property in CSS?

Definition and Usage. The transition-property property specifies the name of the CSS property the transition effect is for (the transition effect will start when the specified CSS property changes). Tip: A transition effect could typically occur when a user hover over an element.


1 Answers

Don't confuse 'transitions' with 'animations'.

CSS animations have different callbacks.

Here's the callbacks for animation:

 $(document).one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", 
                "#robot", 
    function (event)
    {
        // complete
    });
like image 130
Simon_Weaver Avatar answered Oct 05 '22 02:10

Simon_Weaver