JavaScript를 사용하여 여러 브라우저에서 CSS3 전환 종료 이벤트를 어떻게 정규화할 수 있습니까?

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

문제 설명:

다양함 브라우저에서는 CSS3 전환 종료 이벤트가 다르게 트리거됩니다: "webkitTransitionEnd" Webkit, Firefox의 "transitionEnd" 및 Opera의 "oTransitionEnd". 순수 JavaScript에서 이러한 변형을 어떻게 원활하게 처리할 수 있습니까?

해결책:

각 브라우저에 대해 별도의 이벤트 리스너를 구현하는 것은 비효율적이고 지루합니다. 대신 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];
    }
  }
}

이 기능은 요소를 생성하고 잠재적인 이벤트 이름을 반복하여 현재 브라우저에서 지원되는 전환 이벤트를 확인합니다. 발견되면 적절한 이벤트 이름을 반환합니다.

이 솔루션을 사용하려면:

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

이 접근 방식은 브라우저 간 호환성을 보장하고 브라우저 스니핑이나 여러 이벤트 할당을 방지합니다.

위 내용은 JavaScript를 사용하여 여러 브라우저에서 CSS3 전환 종료 이벤트를 어떻게 정규화할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!