브라우저에서 CSS3 전환 기능을 어떻게 정규화합니까?

Webkit의 전환 종료 이벤트는 webkitTransitionEnd, Firefox는 transitionEnd, Opera는 oTransitionEnd입니다. 순수 JS에서 모두를 다루는 좋은 방법은 무엇입니까? 브라우저 스니핑을해야합니까? 또는 각각을 개별적으로 구현 하시겠습니까? 나에게 발생하지 않은 다른 방법?

즉 :

//doing browser sniffing
var transitionend = (isSafari) ? "webkitTransitionEnd" : (isFirefox) ? "transitionEnd" : (isOpera) ? "oTransitionEnd";

element.addEventListener(transitionend, function(){
  //do whatever
},false);

또는

// Assigning an event listener per browser
element.addEventListener("webkitTransitionEnd", fn);
element.addEventListener("oTransitionEnd", fn);
element.addEventListener("transitionEnd", fn);

function fn() {
   //do whatever
}

Modernizr에서 사용되는 기술이 개선되었습니다.

function transitionEndEventName () {
    var i,
        undefined,
        el = document.createElement('div'),
        transitions = {
            'transition':'transitionend',
            'OTransition':'otransitionend',  // oTransitionEnd in very old Opera
            'MozTransition':'transitionend',
            'WebkitTransition':'webkitTransitionEnd'
        };

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

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

그런 다음 전환 종료 이벤트가 필요할 때마다이 함수를 호출 할 수 있습니다.

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

Matijs의 의견에 따르면 전환 이벤트를 감지하는 가장 쉬운 방법은이 경우 jquery 라이브러리를 사용하는 것입니다.

$("div").bind("webkitTransitionEnd.done oTransitionEnd.done otransitionend.done transitionend.done msTransitionEnd.done", function(){
  // Unlisten called events by namespace,
  // to prevent multiple event calls. (See comment)
  // By the way, .done can be anything you like ;)
  $(this).off('.done')
});

라이브러리가없는 자바 스크립트에서는 약간 장황합니다.

element.addEventListener('webkitTransitionEnd', callfunction, false);
element.addEventListener('oTransitionEnd', callfunction, false);
element.addEventListener('transitionend', callfunction, false);
element.addEventListener('msTransitionEnd', callfunction, false);

function callfunction() {
   //do whatever
}

최신 정보

다음은이를 수행하는 더 깨끗한 방법이며 모 더니 저가 필요하지 않습니다.

$(".myClass").one('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', 
function() {
 //do something
});

또는

var transEndEventNames = {
        'WebkitTransition': 'webkitTransitionEnd',
        'MozTransition': 'transitionend',
        'OTransition': 'oTransitionEnd otransitionend',
        'msTransition': 'MSTransitionEnd',
        'transition': 'transitionend'
    }, transitionEnd = transEndEventNames[Modernizr.prefixed('transition')];

이것은 Modernizr에서 제안한 코드를 기반으로하지만 최신 버전의 Opera에 대한 추가 이벤트가 있습니다.

http://modernizr.com/docs/#prefixed

jQuery 및 Bootstrap을 사용하는 경우 $.support.transition.end 하면 현재 브라우저에 맞는 이벤트를 반환합니다.

그것은되는 부트 스트랩에 정의 와에 사용되는 자사의 애니메이션 콜백 JQuery와 문서는 이러한 속성에 의존하지 말 불구하고 :

이러한 속성 중 일부는 아래에 설명되어 있지만 긴 지원 중단 / 제거주기가 적용되지 않으며 내부 jQuery 코드에서 더 이상 필요하지 않으면 제거 될 수 있습니다.

http://api.jquery.com/jQuery.support/

2015 년부터이 한 줄짜리가 거래를 수행해야합니다 (IE 10+, Chrome 1+, Safari 3.2+, FF 4+ 및 Opera 12 +) :-

var transEndEventName = ('WebkitTransition' in document.documentElement.style) ? 'webkitTransitionEnd' : 'transitionend'

이벤트 리스너를 연결하는 것은 간단합니다.

element.addEventListener(transEndEventName , theFunctionToInvoke);

두 번째는 갈 길입니다. 이러한 이벤트 중 하나만 모든 브라우저에서 실행되므로 모든 이벤트를 설정할 수 있으며 작동합니다.

더 깨끗한 방법이 있습니다.

 function transitionEvent() {
      // Create a fake element
      var el = document.createElement("div");

      if(el.style.OTransition) return "oTransitionEnd";
      if(el.style.WebkitTransition) return "webkitTransitionEnd";
      return "transitionend";
    }

Google 클로저를 사용하면이 작업을 수행 할 필요가 없습니다. 요소가있는 경우 :

goog.events.listen(element, goog.events.EventType.TRANSITIONEND, function(event) {
  // ... your code here
});

goog.events.eventtype.js의 소스를 보면 TRANSITIONEND는 useragent를보고 계산됩니다.

// CSS transition events. Based on the browser support described at:
  // https://developer.mozilla.org/en/css/css_transitions#Browser_compatibility
  TRANSITIONEND: goog.userAgent.WEBKIT ? 'webkitTransitionEnd' :
      (goog.userAgent.OPERA ? 'oTransitionEnd' : 'transitionend'),

다음과 같은 코드를 사용합니다 (jQuery 사용).

var vP = "";
var transitionEnd = "transitionend";
if ($.browser.webkit) {
    vP = "-webkit-";
    transitionEnd = "webkitTransitionEnd";
} else if ($.browser.msie) {
    vP = "-ms-";
} else if ($.browser.mozilla) {
    vP = "-moz-";
} else if ($.browser.opera) {
    vP = "-o-";
    transitionEnd = "otransitionend"; //oTransitionEnd for very old Opera
}

이를 통해 JS를 사용하여 속성과 연결된 vP를 지정하여 항목을 추가 할 수 있으며 브라우저에 도달하지 않으면 표준을 사용합니다. 이벤트를 사용하면 다음과 같이 쉽게 바인딩 할 수 있습니다.

object.bind(transitionEnd,function(){
    callback();
});

jquery 재정의 :

(function ($) {
  var oldOn = $.fn.on;

  $.fn.on = function (types, selector, data, fn, /*INTERNAL*/ one) {
    if (types === 'transitionend') {
      types = 'transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd';
    }

    return oldOn.call(this, types, selector, data, fn, one);
  };
})(jQuery);

다음과 같은 사용법 :

$('myDiv').on('transitionend', function() { ... });

수락 된 대답은 정확하지만 해당 요소를 반복해서 다시 만들 필요가 없습니다.

전역 변수를 만들고 함수를 추가합니다.

(function(myLib, $, window, document, undefined){

/**
 * @summary
 * Returns the browser's supported animation end event type.
 * @desc
 * @see {@link https://jonsuh.com/blog/detect-the-end-of-css-animations-and-transitions-with-javascript/}
 * @function myLib.getAnimationEndType
 * @return {string} The animation end event type
 */
(function(){
   var type;

   myLib.getAnimationEndType = function(){
      if(!type)
         type = callback();
      return type;

      function callback(){
         var t,
             el = document.createElement("fakeelement");

         var animations = {
            "animation"      : "animationend",
            "OAnimation"     : "oAnimationEnd",
            "MozAnimation"   : "animationend",
            "WebkitAnimation": "webkitAnimationEnd"
         }

         for (t in animations){
            if (el.style[t] !== undefined){
               return animations[t];
            }
         }
      }
   }
}());

/**
 * @summary
 * Returns the browser's supported transition end event type.
 * @desc
 * @see {@link https://jonsuh.com/blog/detect-the-end-of-css-animations-and-transitions-with-javascript/}
 * @function myLib.getTransitionEndType
 * @return {string} The transition end event type
 */
(function(){
   var type;

   myLib.getTransitionEndType = function(){
      if(!type)
         type = callback();
      return type;

      function callback(){
         var t,
             el = document.createElement("fakeelement");

         var transitions = {
            "transition"      : "transitionend",
            "OTransition"     : "oTransitionEnd",
            "MozTransition"   : "transitionend",
            "WebkitTransition": "webkitTransitionEnd"
         }

         for (t in transitions){
            if (el.style[t] !== undefined){
               return transitions[t];
            }
         }
      }
   }
}());

}(window.myLib = window.myLib || {}, jQuery, window, document));