How Can I Detect the Completion of CSS Transitions?

Callbacks on CSS Transitions

Query: Can one receive a notification when a CSS transition has been completed?

Answer: In browsers that support callbacks, an event is triggered upon transition completion. The event varies among browsers:

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

WebKit TransitionEnd Issue

Beware that webkitTransitionEnd may not always trigger. This occurs when the animation has no visible effect on the element. To work around this, consider a timeout to fire the event handler if the event is not triggered as expected.

Recommended Code Structure

var transitionEndEventName = "XXX"; // Specify the appropriate event name
var elemToAnimate = ... // Element to be animated
var done = false;
var transitionEnded = function() {
    done = true;
    // Code to execute when transition finishes
    elemToAnimate.removeEventListener(transitionEndEventName, transitionEnded, false);
};
elemToAnimate.addEventListener(transitionEndEventName, transitionEnded, false);

// Animation triggering code here

// Fallback for browsers without event notifications
setTimeout(function() {
    if (!done) {
        transitionEnded();
    }
}, XXX); // Calculate XXX based on animation time and grace period

Note: Refer to "How do I normalize CSS3 Transition functions across browsers?" for normalizing transition event names.

The above is the detailed content of How Can I Detect the Completion of CSS Transitions?. For more information, please follow other related articles on the PHP Chinese website!