It's really common to want to know when an transition has finished. Luckily there is a built in event to do that – you don't need to use setTimeout to keep track yourself!

Because basically everyone seems to be using jQuery, I'll do the same. It's easy to read and concise. Feel free to use vanilla JS if you'd rather.

For transitions, there is one event fired when the transition completes. Of course, it's easy to tell when they start, as they must be driven by some property change.

This event is called either transitionend (Firefox, Internet Explorer) or webkitTransitionEnd in Webkit. It has two properties, propertyName and elapsedTime, which do what you'd expect.

Hover on me
Events

Simplified Javascript with jQuery

$(function(){
	$("#red_box").on('transitionend webkitTransitionEnd', function(e){
		/* Rather than log on screen, we'll alert the information */
		alert(e.originalEvent.propertyName);
		alert(e.originalEvent.elapsedTime + 's');
	});
});

Comments/Questions?

Please add any questions/corrections/extra info below. Please be courteous to other users.

blog comments powered by Disqus

avenue-origin