Callback on CSS transition
I know that Safari implements a webkitTransitionEnd callback that you can attach directly to the element with the transition.
Their example (reformatted to multiple lines):
box.addEventListener(
'webkitTransitionEnd',
function( event ) {
alert( "Finished transition!" );
}, false );
Yes, if such things are supported by the browser, then an event is triggered when the transition completes. The actual event however, differs between browsers:
- Webkit browsers (Chrome, Safari) use
webkitTransitionEnd
- Firefox uses
transitionend
- IE9+ uses
msTransitionEnd
- Opera uses
oTransitionEnd
However you should be aware that webkitTransitionEnd
doesn't always fire! This has caught me out a number of times, and seems to occur if the animation would have no effect on the element. To get around this, it makes sense to use a timeout to fire the event handler in the case that it's not been triggered as expected. A blog post about this problem is available here: http://www.cuppadev.co.uk/the-trouble-with-css-transitions/ <-- 500 Internal Server Error
With this in mind, I tend to use this event in a chunk of code that looks a bit like this:
var transitionEndEventName = "XXX"; //figure out, e.g. "webkitTransitionEnd"..
var elemToAnimate = ... //the thing you want to animate..
var done = false;
var transitionEnded = function(){
done = true;
//do your transition finished stuff..
elemToAnimate.removeEventListener(transitionEndEventName,
transitionEnded, false);
};
elemToAnimate.addEventListener(transitionEndEventName,
transitionEnded, false);
//animation triggering code here..
//ensure tidy up if event doesn't fire..
setTimeout(function(){
if(!done){
console.log("timeout needed to call transition ended..");
transitionEnded();
}
}, XXX); //note: XXX should be the time required for the
//animation to complete plus a grace period (e.g. 10ms)
Note: to get the transition event end name you can use the method posted as the answer in: How do I normalize CSS3 Transition functions across browsers?.
Note: this question is also related to: - CSS3 transition events