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 ...
随机推荐
- 如何判断页面是在移动端还是PC端打开的呢
1. window.location.href = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent) ? " ...
- luogu 2-SAT 问题
题目大意:给出n个bool变量,以及m个条件,条件为x,vx,y,vy,表示 x == vx || y == vy . 求匹配. 题解: 最近新学了一下2-SAT算法.2-SAT指有若干个bool变量 ...
- 数组排序函数-php数组函数(一)
数组排序,共13个 函数中有u的,能自定义比较函数:有k的,按照键来排序:有r(reverse)的,倒序:有a(association)的,一定是键值关联,除了rsort() usort() sort ...
- element-UI 多表单重置的时候的坑
问题细化一下是这样的:比如我有一个用来修改数据的表单,第一条数据是{name: 'Xixi', age: 12},打开表单后就有两个输入框分别填的是Xixi和12,此时我修改Xixi为Haha,调用t ...
- 集训第六周 O题
Description Gerald got a very curious hexagon for his birthday. The boy found out that all the angle ...
- 集训第六周 E题
E - 期望(经典问题) Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%lld & %llu Submit S ...
- package control(转载)
Package Control(扩展包管理器) []Package Control 可以看做是一个ST的扩展管理器,可以去下载.安装.删除 Sublime Text 3的各种插件.皮肤等. [ ...
- 权限管理组件:rbac
rbac: Role_Based Access Control,基于角色的权限控制 权限:一个包含正则表达式 的url就是一个权限 目录结构: rbac这个app中的文件代码如下: rbac/mode ...
- .net 程序集保护与破解
一.保护方法(强签名.混淆.加壳) 强名称是由程序集的标识加上公钥和数字签名组成的.其中,程序集的标识包括简单文本名称.版本号.区域性信息(如果提供的话).语言文化信息.处理器架构信息.强名称是使用相 ...
- 常见Unix指令
常用的UNIX指令: 1.文件和目录操作 ls –l 列出当前目录下的所有内容(文件\文件夹) pwd 显示出当前目录的名称 cd 改变当前操作的目录 who 显示当前用户名 clear ...