Bootstrap原始碼分析之transition、affix

小龍女先生發表於2016-05-29

一、Transition(過濾)

作為一個基礎支援的元件,被其他元件多次引用。實現根據瀏覽器支援transition的能力,然後繫結動畫的結束事件;
首先:建立一個Element;
然後:迭代檢視此元素支援的transition動畫名稱
Transition實現的技巧,主要是重寫了jquery的event物件,程式碼如下:

$(function () {
    $.support.transition = transitionEnd()

    if (!$.support.transition) return

    $.event.special.bsTransitionEnd = {
      bindType: $.support.transition.end,
      delegateType: $.support.transition.end,
      handle: function (e) {
        if ($(e.target).is(this)) return e.handleObj.handler.apply(this, arguments)
      }
    }
  })

 

二、Affix(自動浮動定位)

1、Target:參數列示其定位參考節點(應該是產生滾動條的父容器物件),預設是window
2、Data-offset設定的top和bottom值,只會用於計算表示式,不會設定到css中
3、三種位置定位樣式類:

3.1、Affix-top:到達頁面頂部的時候會新增的樣式
3.2、Affix:在頁面中部的時候會新增的樣式
3.3、Affix-bottom:在頁面底部的時候會新增的樣式

4、處理公式:

1、Top:traget的滾動條高度(scrollTop)< 元素設定離頂位置的距離(offsetTop)(首次判斷)
    1.1、scrollTop設定為:元素本身定位的top(元素當前定位離文件原點的距離)(非首次)
2、getPinnedOffset:獲取粘住元素top – target滾動條的top
3、bottom:如果粘住元素是首次bottom定位的時候,那麼bottom就是 target滾動條高度 + target元素的高度 >= 整個文件滾動條高度 – 粘住元素距離底部的高度
   3.1、如果是非首次bottom定位
      3.1.1、如果offsetTop(元素設定離頂位置的距離)不為空,target的top  + getpinnedOffset的值 > 粘住元素當前定位到top的值
      3.1.2、如果offsetTop為空,target的top   + target元素的高度 > 文件高度 – 粘住元素距離底部的高度
4、能改變粘住元素的只有他的top,top值為:文件高度 — 粘住元素高度 — 粘住元素距離底部的高度

5、坑之所在:

1、top和bottom一起使用的時候,會出現衝突,原因:

    Affix-bottom,也就是到達頁面底部的時候,bootstrap是用offset來設定的top值,給元素加了position:relative值,這就導致在回到頁面頂部後,再次向下滾動時候,沒有任何效果
原因:行內樣式設定的relative會覆蓋class中設定的fixed樣式

6、總結

1、在top情況表現良好,在bottom情況下需要自己加入手動控制
2、應用affix控制元件,至少要自己重寫affix樣式,用於控制粘住條的定位。

相關文章