다양한 브라우저에서 CSS3 전환 종료 이벤트를 안정적으로 감지하고 처리하려면 어떻게 해야 합니까?

CSS3 전환 종료 이벤트의 브라우저 간 정규화

브라우저마다 서로 다른 CSS3 전환 종료 이벤트 이름을 처리하는 것은 어려울 수 있습니다. 이 문제를 해결하기 위한 몇 가지 접근법은 다음과 같습니다.

브라우저 스니핑

한 가지 접근법은 아래와 같이 브라우저 스니핑입니다.

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

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

이 방법 특정 브라우저 사용자 에이전트를 확인하고 적절한 이벤트 이름을 할당합니다. 그러나 사전 정의된 특정 규칙에 의존하며 모든 브라우저 버전이나 잠재적인 변형을 설명하지 못할 수도 있습니다.

다중 이벤트 리스너

또는 다음에 대해 여러 이벤트 리스너를 연결할 수 있습니다. 지원되는 각 브라우저 이벤트 이름:

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

function fn() {
  // Do something
}

이 접근 방식은 지원되는 모든 이벤트를 처리하지만 불필요한 이벤트 처리로 이어질 수 있습니다.

Modernizr의 향상된 기술

보다 강력하고 브라우저 간 친화적인 접근 방식은 Modernizr 라이브러리를 사용하여 전환 종료 이벤트 이름을 동적으로 결정하는 것입니다.

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);

이 기술은 브라우저 스니핑을 방지하고 요소의 지원되는 CSS를 기반으로 지원되는 이벤트 이름을 동적으로 감지합니다. 속성.

위 내용은 다양한 브라우저에서 CSS3 전환 종료 이벤트를 안정적으로 감지하고 처리하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!