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); // 这个时间是过渡持续的时间 这样就一定有回掉了*/