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); // 这个时间是过渡持续的时间 这样就一定有回掉了*/
Bootstrap 过渡效果 transition.js源码分析的更多相关文章
- Bootstrap导航栏navbar源码分析
1.本文目地:分析bootstrap导航栏及其响应式的实现方式,提升自身css水平 先贴一个bootstrap的导航栏模板 http://v3.bootcss.com/examples/navbar- ...
- basket.js 源码分析
basket.js 源码分析 一.前言 basket.js 可以用来加载js脚本并且保存到 LocalStorage 上,使我们可以更加精准地控制缓存,即使是在 http 缓存过期之后也可以使用.因此 ...
- events.js 源码分析
events.js 源码分析 1. 初始化 // 使用 this.ee = new EventEmitter(); // 源码 // 绑定this域,初始化 _events,_eventsCount和 ...
- Vue.js 源码分析(二十八) 高级应用 transition组件 详解
transition组件可以给任何元素和组件添加进入/离开过渡,但只能给单个组件实行过渡效果(多个元素可以用transition-group组件,下一节再讲),调用该内置组件时,可以传入如下特性: n ...
- Vue.js 源码分析(三十一) 高级应用 keep-alive 组件 详解
当使用is特性切换不同的组件时,每次都会重新生成组件Vue实例并生成对应的VNode进行渲染,这样是比较花费性能的,而且切换重新显示时数据又会初始化,例如: <!DOCTYPE html> ...
- Vue.js 源码分析(二十九) 高级应用 transition-group组件 详解
对于过度动画如果要同时渲染整个列表时,可以使用transition-group组件. transition-group组件的props和transition组件类似,不同点是transition-gr ...
- Vue.js 源码分析(二十三) 指令篇 v-show指令详解
v-show的作用是将表达式值转换为布尔值,根据该布尔值的真假来显示/隐藏切换元素,它是通过切换元素的display这个css属性值来实现的,例如: <!DOCTYPE html> < ...
- Vue.js 源码分析(十二) 基础篇 组件详解
组件是可复用的Vue实例,一个组件本质上是一个拥有预定义选项的一个Vue实例,组件和组件之间通过一些属性进行联系. 组件有两种注册方式,分别是全局注册和局部注册,前者通过Vue.component() ...
- Backbone.js源码分析(珍藏版)
源码分析珍藏,方便下次阅读! // Backbone.js 0.9.2 // (c) 2010-2012 Jeremy Ashkenas, DocumentCloud Inc. // Backbone ...
随机推荐
- HttpClient 学习整理 (转)
source:http://www.blogjava.net/Alpha/archive/2007/01/22/95216.html HttpClient 是我最近想研究的东西,以前想过的一些应用没能 ...
- [Luogu] P1441 砝码称重
题目描述 现有n个砝码,重量分别为a1,a2,a3,……,an,在去掉m个砝码后,问最多能称量出多少不同的重量(不包括0). 题目分析 因为读错题WAWA大哭. 先dfs枚举选的砝码,满足条件时进行d ...
- HDU - 4514 湫湫系列故事——设计风景线(并查集判环)
题目: 随着杭州西湖的知名度的进一步提升,园林规划专家湫湫希望设计出一条新的经典观光线路,根据老板马小腾的指示,新的风景线最好能建成环形,如果没有条件建成环形,那就建的越长越好. 现在已经勘探确定了n ...
- phpstorm破解激活码
一.将“0.0.0.0 account.jetbrains.com”添加到hosts文件中 二.浏览器打开 http://idea.lanyus.com,点击页面中的“获得注册码”,然后在注册时切换至 ...
- windows窗口过程函数名词解析
windows窗口过程函数名词解析 LRESULT CALLBACK WndProc(HWND hwnd,UINT message,WPARAM wParam,LPARAM lParam) 1. LR ...
- N分之一 竖式除法模拟
N分之一 Description Alice越来越痴迷于数学问题了.一天,爸爸出了个数学题想难倒她,让她求1 / n. 可怜的Alice只有一岁零九个月,回答不上来 ~~~~(>_<)~~ ...
- 实现下载pdf文件
//打开文件//$fileDir为文件路径 $fileName为文件名称$file = fopen($fileDir . DS . $fileName, "r");//输入文件标签 ...
- POJ 1191 DP+DFS棋盘分割问题
题目大意: Description 将一个8*8的棋盘进行如下分割:将原棋盘割下一块矩形棋盘并使剩下部分也是矩形,再将剩下的部分继续如此分割,这样割了(n-1)次后,连同最后剩下的矩形棋盘共有n块矩形 ...
- bzoj1052 [HAOI2007]覆盖问题 - 贪心
Description 某人在山上种了N棵小树苗.冬天来了,温度急速下降,小树苗脆弱得不堪一击,于是树主人想用一些塑料薄膜把这些小树遮盖起来,经过一番长久的思考,他决定用3个L*L的正方形塑料薄膜将小 ...
- Delphi:校验手机号及身份证号
//校验手机号 function IsMobileNumber( num:string ):boolean; begin Result:=False; if length( tr ...