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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM