ฉันจะทำให้ฟังก์ชันการเปลี่ยน CSS3 เป็นปกติในเบราว์เซอร์ได้อย่างไร

เหตุการณ์สิ้นสุดการเปลี่ยนแปลงของ Webkit เรียกว่า webkitTransitionEnd, Firefox คือ transitionEnd โอเปร่าคือ 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จะส่งคืนเหตุการณ์ที่ถูกต้องสำหรับเบราว์เซอร์ปัจจุบัน

ถูกกำหนดไว้ใน Bootstrapและใช้ในการเรียกกลับแบบแอนิเมชั่นแม้ว่าเอกสาร 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));