Ruby's Louvre

每天学习一点点算法

导航

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。本文完。

posted on 2012-12-20 13:43  司徒正美  阅读(7827)  评论(4)  编辑  收藏  举报