Home > Web Front-end > CSS Tutorial > How Can I Reliably Detect and Handle CSS3 Transition End Events Across Different Browsers?

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

Linda Hamilton
Release: 2024-12-04 21:41:13
Original
598 people have browsed it

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);
Copy after login

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
}
Copy after login

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);
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template