Làm cách nào để chuẩn hóa các chức năng Chuyển đổi CSS3 trên các trình duyệt?

Sự kiện kết thúc quá trình chuyển đổi của Webkit được gọi là webkitTransitionEnd, Firefox là chuyển tiếpEnd, toán hạng là oTransitionEnd. Cách tốt để giải quyết tất cả chúng trong JS thuần túy là gì? Tôi có nên kiểm tra trình duyệt không? hoặc thực hiện từng cái riêng biệt? Một số cách khác đã không xảy ra với tôi?

I E:

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

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

hoặc là

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

function fn() {
   //do whatever
}

Có một kỹ thuật được sử dụng trong Modernizr, đã được cải thiện:

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'; 
}

Sau đó, bạn chỉ có thể gọi hàm này bất cứ khi nào bạn cần sự kiện kết thúc chuyển đổi:

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

Theo nhận xét của Matijs, cách dễ nhất để phát hiện các sự kiện chuyển tiếp là sử dụng thư viện, jquery trong trường hợp này:

$("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')
});

Trong javascript ít thư viện, nó có một chút dài dòng:

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

function callfunction() {
   //do whatever
}

Cập nhật

Sau đây là một cách làm dễ dàng hơn và không yêu cầu hiện đại hóa

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

Ngoài ra

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

Điều này dựa trên mã do Modernizr đề xuất, nhưng với sự kiện bổ sung cho các phiên bản Opera mới hơn.

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

Nếu bạn sử dụng jQuery và Bootstrap $.support.transition.end sẽ trả về sự kiện phù hợp cho trình duyệt hiện tại.

Nó được định nghĩa trong Bootstrap và được sử dụng trong các lệnh gọi lại hoạt ảnh của nó , mặc dù các tài liệu jQuery nói rằng không dựa vào các thuộc tính này:

Mặc dù một số thuộc tính này được trình bày dưới đây, nhưng chúng không phải tuân theo chu kỳ ngừng sử dụng / xóa lâu dài và có thể bị xóa sau khi mã jQuery nội bộ không còn cần đến chúng nữa.

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

Kể từ năm 2015, một lớp lót này sẽ thực hiện thỏa thuận (IE 10+, Chrome 1+, Safari 3.2+, FF 4+ và Opera 12 +): -

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

Việc đính kèm trình nghe sự kiện rất đơn giản: -

element.addEventListener(transEndEventName , theFunctionToInvoke);

Thứ hai là con đường đi. Chỉ một trong những sự kiện đó sẽ kích hoạt trong mọi trình duyệt, vì vậy bạn có thể thiết lập tất cả chúng và nó sẽ hoạt động.

Đây là một cách sạch hơn

 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 đóng đảm bảo bạn không phải làm điều này. Nếu bạn có một phần tử:

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

nhìn vào nguồn của goog.events.eventtype.js, TRANSITIONEND được tính bằng cách xem 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'),

Tôi sử dụng mã như thế này (với 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
}

Điều đó cho phép tôi sử dụng JS để thêm mọi thứ bằng cách chỉ định vP được kết hợp với thuộc tính và nếu nó không trúng trình duyệt, nó chỉ sử dụng tiêu chuẩn. Các sự kiện cho phép tôi dễ dàng liên kết như vậy:

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

ghi đè 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);

và cách sử dụng như:

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

Câu trả lời được chấp nhận là đúng nhưng bạn không phải tạo lại phần tử đó nhiều lần-và ...

Xây dựng một biến toàn cục và thêm (các) hàm:

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