How Can I Reliably Detect and Handle CSS3 Transition End Events Across Different Browsers?

Cross-Browser Normalization of CSS3 Transition End Events

Dealing with different CSS3 transition end event names across browsers can be a challenge. Here are some approaches to address this issue:

Browser Sniffing

One approach is browser sniffing, as shown below:

var transitionend = (isSafari) ? "webkitTransitionEnd" : (isFirefox) ? "transitionEnd" : (isOpera) ? "oTransitionEnd" : "transitionend";

element.addEventListener(transitionend, function() {
  // Do something
}, false);

This method checks for specific browser user agents and assigns the appropriate event name. However, it relies on specific predefined rules and may not account for all browser versions or potential variations.

Multiple Event Listeners

Alternatively, you can attach multiple event listeners for each supported browser event name:

element.addEventListener("webkitTransitionEnd", fn);
element.addEventListener("oTransitionEnd", fn);
element.addEventListener("transitionEnd", fn);

function fn() {
  // Do something
}

This approach handles all supported events but may lead to unnecessary event handling overhead.

Modernizr's Improved Technique

A more robust and cross-browser-friendly approach is to dynamically determine the transition end event name using the Modernizr library:

function transitionEndEventName() {
  var el = document.createElement('div'),
      transitions = {
        'transition':'transitionend',
        'OTransition':'otransitionend',
        'MozTransition':'transitionend',
        'WebkitTransition':'webkitTransitionEnd'
      };

  for (var i in transitions) {
    if (transitions.hasOwnProperty(i) && el.style[i] !== undefined) {
      return transitions[i];
    }
  }

  throw 'TransitionEnd event is not supported in this browser'; 
}

var transitionEnd = transitionEndEventName();
element.addEventListener(transitionEnd, theFunctionToInvoke, false);

This technique avoids browser sniffing and dynamically detects the supported event name based on the element's supported CSS properties.

The above is the detailed content of How Can I Reliably Detect and Handle CSS3 Transition End Events Across Different Browsers?. For more information, please follow other related articles on the PHP Chinese website!