前言:
閱讀建議:去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); // 這個時間是過渡持續的時間 這樣就一定有回掉了*/