bootstrap源码学习与示例：bootstrap-transition - 司徒正美
bootstrap源码学习与示例：bootstrap-transition
虽然是基于不纯的目的来学习它，但想必也对大家有所帮助。
bootstrap虽然挂着twitter的名字，但实质上只是twitter的两个员工自己的项目。
bootstrap不是单纯一个项目，它的许多部件，包括CSS部分，JS部分，还是最原始的less部分要依赖其他项目才能运作。不过CSS已经有合并版了，JS我们也只需要导入jQuery。因此想跟着学习的人，到这里把源码部分CSS下载回来，jQuery使用1.83就行了。
或者搭建以下这样的架子：
<!DOCTYPE html>
<html>
<head>
<title>bootstrap学习 by 司徒正美</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script src="http://code.jquery.com/jquery-1.8.3.min.js" > </script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css"/>
<script>
</script>
</head>
<body>
</body>
</html>
本系列只专注于其JS组件部分。我们先看它实现动画的最核心部分。bootstrap近乎洁癖地只选择CSS3的transition这实现它的动画，因此在IE678看不到效果。加之它的CSS部分也不打算写哈hack，在IE78下显得非常寒碜。因此大陆前端想使用这框架需要再三斟酌了！
第一篇是解说bootstrap-transition.js这文件，可以自己到github中下回来看。我这里语法高亮了，可能在源码上插入些东西，不能直接拷贝使用。
!function ($) {
"use strict"; // ecma262v5引入的严格模式
$(function () {
$.support.transition = (function () {
var transitionEnd = (function () {
var el = document.createElement(\'bootstrap\')//创建一个自定义标签做测试
, transEndEventNames = {//用于检测CSS3 transition结束时的回调名
\'WebkitTransition\' : \'webkitTransitionEnd\'
, \'MozTransition\' : \'transitionend\'
, \'OTransition\' : \'oTransitionEnd otransitionend\'//opera比较恶心，举棋不定
, \'transition\' : \'transitionend\'
}
, name
for (name in transEndEventNames){
if (el.style[name] !== undefined) {
return transEndEventNames[name]
}
}
}())
return transitionEnd && {
end: transitionEnd
}
})()
})
}(window.jQuery);
总而言之，这文件是为bootstrap其他JS组件提供一个通用的特性检测。由于CSS3的限制，因此它提供的特效也很有限，最常用的就是fade。本文完。