How Can I Reliably Detect the Completion of CSS Transitions Across Browsers?

Event-Driven CSS Transitions: Detecting Transition Completion

When working with CSS transitions, it's often desirable to receive a notification when the transition has completed. Fortunately, modern browsers provide events that trigger when transitions end, facilitating the implementation of callback functionality.

Event Names Across Browsers

The specific event name for transition completion varies across browsers:

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

Implementing Event Handling

To implement a callback function when CSS transitions complete, follow these steps:

1. Determine the appropriate transition event name for the browser used.
2. Add an event listener to the element undergoing the transition:

elemToAnimate.addEventListener(transitionEndEventName, transitionEnded);

3. Define the transitionEnded callback function to perform the desired actions when the transition completes.

However, it's important to note that the webkitTransitionEnd event does not always fire consistently. To account for this, it's recommended to set a timeout to call the event handler if it doesn't trigger as expected.

Fallback Timeout

setTimeout(function(){
    if(!done){
        console.log("timeout needed to call transition ended..");
        transitionEnded();
    }
}, requiredTimeForAnimation);

By incorporating the timeout fallback, you can ensure that the callback is executed even if the transition event doesn't fire.

Getting the Transition Event Name

The method outlined in the answer to the question "How do I normalize CSS3 Transition functions across browsers?" can be used to determine the transition event name supported by the current browser.

Additional Resources

• Handling Transitions with CSS3
• CSS3 transition events

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