Bootstrap 過渡效果 transition.js源碼分析

前言：

閱讀建議：去github下載一個完整dom然后把，本篇代碼復制進去然后運行就好了以地址

Bootstrap 自帶的 JavaScript 插件的動畫效果幾乎都是使用 CSS 過渡實現的，那么判斷動畫什么時候結束就變得非常重要，因為我們要在動畫結束后執行一些回調函數，

正好 css有一個事件transitionend（過度完成）

，而其中的 transition.js 就是為了判斷當前使用的瀏覽器是否支持 CSS3  transitionend 過渡。

功能：
1判斷支不支持transitionend事件

2不支持transitionend時，模擬一下

/* ========================================================================
 * Bootstrap: transition.js v3.3.7
 * http://getbootstrap.com/javascript/#transitions
 * ========================================================================
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * ======================================================================== */
//Bootstrap 自帶的 JavaScript 插件的動畫效果幾乎都是使用 CSS 過渡實現的，而其中的 transition.js 就是為了判斷當前使用的瀏覽器是否支持 CSS 過渡。
//就是判斷支不支持transitionend事件而已。

+function ($) {
  'use strict';

  // CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)
  // ============================================================
//比如我使用低版本的 Chrome 瀏覽器的話，那么得到的對象就是 {end: 'webkitTransitionEnd'} 這樣；如果使用 IE 8 則是 false，然后就可以添加該事件的回調函數了：
  function transitionEnd() {/*過度結束事件是有兼容性的，所以專門創建一個方法，來獲取每個瀏覽器兼容的TransitionEnd（用的應當是狀態模式）*/
    var el = document.createElement('bootstrap'); // 創建一個元素用於測試

    var transEndEventNames = {//按照當前的主流瀏覽器趨勢總共需要判斷四種不同前綴的屬性名稱：
      WebkitTransition : 'webkitTransitionEnd',//低版本的 Chrome 和 Safari 
      MozTransition    : 'transitionend',//
      OTransition      : 'oTransitionEnd otransitionend',
      transition       : 'transitionend'
    }

    for (var name in transEndEventNames) {
      if (el.style[name] !== undefined) {
        return { end: transEndEventNames[name] }
      }
    }

    return false // explicit for ie8 (  ._.)    IE8 不支持過度，(  ._.) 
  }

  // http://blog.alexmaccaw.com/css-transitions
  /*事件名稱的問題基本上解決了，但是這個事件有個問題就是有時根本不會觸發，這是因為屬性值沒有發生變化或沒有繪制行為發生。要確保每次回調都會被調用，我們增加一個定時器即可：
   所以我們要模擬事件結束*/
  $.fn.emulateTransitionEnd = function (duration) {//放在jquery的 $.fn對象下
    var called = false//// transitionend 事件是否已觸發標識
    var $el = this
    $(this).one('bsTransitionEnd', function () { called = true });// 表示已觸發
    var callback = function () { if (!called) $($el).trigger($.support.transition.end) }//// 未觸發，強制其觸發
    setTimeout(callback, duration)//// 一段時間后檢測是否觸發
    return this
  }

  $(function () {
    $.support.transition = transitionEnd()//掛載到$.support下面

    if (!$.support.transition) return//說明不自持過度 // 支持過渡的時候才執行后面的代碼

    $.event.special.bsTransitionEnd = {//$.support.transition.end 好惡心啊！添加事件回調的時候就可以像這樣：$('.circle').one('bsTransitionEnd', function() {}).emulateTransitionEnd(1000);
      bindType: $.support.transition.end,
      delegateType: $.support.transition.end,
      handle: function (e) {
        if ($(e.target).is(this)) return e.handleObj.handler.apply(this, arguments)
      }
    }
  })

}(jQuery);


/*該方法的作用是一段時間(就是過渡持續的時間 transition-duration )過后如果 transitionend 事件沒有發生則強制在該元素上觸發這個事件。

$('.circle').one($.support.transition.end, function() {});
$('.circle').emulateTransitionEnd(1000); // 這個時間是過渡持續的時間       這樣就一定有回掉了*/