How Can I Get Notifications When CSS Transitions Finish Across Different Browsers?

Notifications for CSS Transition Completion

When CSS transitions conclude, it's valuable to receive notifications to initiate post-transition actions. Fortunately, browsers provide events that trigger upon transition completion, allowing developers to register callback functions.

Browser-Specific Event Names

However, browsers utilize browser-dependent event names:

• Webkit browsers (Chrome, Safari): webkitTransitionEnd
• Firefox: transitionend
• IE9 : msTransitionEnd
• Opera: oTransitionEnd

webkitTransitionEnd Pitfalls

Note that webkitTransitionEnd may not always fire, especially when animation effects have no noticeable impact on the element. To mitigate this, employ a timeout to execute the event handler if it doesn't trigger as expected.

Code Example

The following code demonstrates the usage of this event:

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) 

Browser Compatibility Note

To determine the appropriate transition event name for a specific browser, utilize the method highlighted in "How do I normalize CSS3 Transition functions across browsers?".

The above is the detailed content of How Can I Get Notifications When CSS Transitions Finish Across Different Browsers?. For more information, please follow other related articles on the PHP Chinese website!