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"
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.
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 ...
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.
CSS animations have different callbacks.
Here's the callbacks for animation:
$(document).one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",
"#robot",
function (event)
{
// complete
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With