Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Callback on CSS transition

Is it possible to get a notification (like callback) when a CSS transition has been completed?

like image 812
Pompair Avatar asked Jan 18 '10 16:01

Pompair


2 Answers

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

like image 126
Mark Rhodes Avatar answered Sep 28 '22 01:09

Mark Rhodes


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 ); 
like image 44
Doug Neiner Avatar answered Sep 28 '22 03:09

Doug Neiner