前言:

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

Bootstrap 过渡效果 transition.js源码分析的更多相关文章

  1. Bootstrap导航栏navbar源码分析

    1.本文目地:分析bootstrap导航栏及其响应式的实现方式,提升自身css水平 先贴一个bootstrap的导航栏模板 http://v3.bootcss.com/examples/navbar- ...

  2. basket.js 源码分析

    basket.js 源码分析 一.前言 basket.js 可以用来加载js脚本并且保存到 LocalStorage 上,使我们可以更加精准地控制缓存,即使是在 http 缓存过期之后也可以使用.因此 ...

  3. events.js 源码分析

    events.js 源码分析 1. 初始化 // 使用 this.ee = new EventEmitter(); // 源码 // 绑定this域,初始化 _events,_eventsCount和 ...

  4. Vue.js 源码分析(二十八) 高级应用 transition组件 详解

    transition组件可以给任何元素和组件添加进入/离开过渡,但只能给单个组件实行过渡效果(多个元素可以用transition-group组件,下一节再讲),调用该内置组件时,可以传入如下特性: n ...

  5. Vue.js 源码分析(三十一) 高级应用 keep-alive 组件 详解

    当使用is特性切换不同的组件时,每次都会重新生成组件Vue实例并生成对应的VNode进行渲染,这样是比较花费性能的,而且切换重新显示时数据又会初始化,例如: <!DOCTYPE html> ...

  6. Vue.js 源码分析(二十九) 高级应用 transition-group组件 详解

    对于过度动画如果要同时渲染整个列表时,可以使用transition-group组件. transition-group组件的props和transition组件类似,不同点是transition-gr ...

  7. Vue.js 源码分析(二十三) 指令篇 v-show指令详解

    v-show的作用是将表达式值转换为布尔值,根据该布尔值的真假来显示/隐藏切换元素,它是通过切换元素的display这个css属性值来实现的,例如: <!DOCTYPE html> < ...

  8. Vue.js 源码分析(十二) 基础篇 组件详解

    组件是可复用的Vue实例,一个组件本质上是一个拥有预定义选项的一个Vue实例,组件和组件之间通过一些属性进行联系. 组件有两种注册方式,分别是全局注册和局部注册,前者通过Vue.component() ...

  9. Backbone.js源码分析(珍藏版)

    源码分析珍藏,方便下次阅读! // Backbone.js 0.9.2 // (c) 2010-2012 Jeremy Ashkenas, DocumentCloud Inc. // Backbone ...

随机推荐

  1. HttpClient 学习整理 (转)

    source:http://www.blogjava.net/Alpha/archive/2007/01/22/95216.html HttpClient 是我最近想研究的东西,以前想过的一些应用没能 ...

  2. [Luogu] P1441 砝码称重

    题目描述 现有n个砝码,重量分别为a1,a2,a3,……,an,在去掉m个砝码后,问最多能称量出多少不同的重量(不包括0). 题目分析 因为读错题WAWA大哭. 先dfs枚举选的砝码,满足条件时进行d ...

  3. HDU - 4514 湫湫系列故事——设计风景线(并查集判环)

    题目: 随着杭州西湖的知名度的进一步提升,园林规划专家湫湫希望设计出一条新的经典观光线路,根据老板马小腾的指示,新的风景线最好能建成环形,如果没有条件建成环形,那就建的越长越好. 现在已经勘探确定了n ...

  4. phpstorm破解激活码

    一.将“0.0.0.0 account.jetbrains.com”添加到hosts文件中 二.浏览器打开 http://idea.lanyus.com,点击页面中的“获得注册码”,然后在注册时切换至 ...

  5. windows窗口过程函数名词解析

    windows窗口过程函数名词解析 LRESULT CALLBACK WndProc(HWND hwnd,UINT message,WPARAM wParam,LPARAM lParam) 1. LR ...

  6. N分之一 竖式除法模拟

    N分之一 Description Alice越来越痴迷于数学问题了.一天,爸爸出了个数学题想难倒她,让她求1 / n. 可怜的Alice只有一岁零九个月,回答不上来 ~~~~(>_<)~~ ...

  7. 实现下载pdf文件

    //打开文件//$fileDir为文件路径 $fileName为文件名称$file = fopen($fileDir . DS . $fileName, "r");//输入文件标签 ...

  8. POJ 1191 DP+DFS棋盘分割问题

    题目大意: Description 将一个8*8的棋盘进行如下分割:将原棋盘割下一块矩形棋盘并使剩下部分也是矩形,再将剩下的部分继续如此分割,这样割了(n-1)次后,连同最后剩下的矩形棋盘共有n块矩形 ...

  9. bzoj1052 [HAOI2007]覆盖问题 - 贪心

    Description 某人在山上种了N棵小树苗.冬天来了,温度急速下降,小树苗脆弱得不堪一击,于是树主人想用一些塑料薄膜把这些小树遮盖起来,经过一番长久的思考,他决定用3个L*L的正方形塑料薄膜将小 ...

  10. Delphi:校验手机号及身份证号

    //校验手机号  function IsMobileNumber( num:string ):boolean;   begin     Result:=False;     if length( tr ...