讀Zepto源碼之fx_methods模塊

junbaor 發布于2019-08-21 16:59 / 2583人閱讀

摘要：所以模塊依賴于模塊，在引入前必須引入模塊。原有的方法分析見讀源碼之樣式操作方法首先調用原有的方法，將元素顯示出來，這是實現動畫的基本條件。如果沒有傳遞，或者為值，則表示不需要動畫，調用原有的方法即可。

fx 模塊提供了 animate 動畫方法，fx_methods 利用 animate 方法，提供一些常用的動畫方法。所以 fx_methods 模塊依賴于 fx 模塊，在引入 fx_methods 前必須引入 fx 模塊。

讀 Zepto 源碼系列文章已經放到了github上，歡迎star: reading-zepto

源碼版本

本文閱讀的源碼為 zepto1.2.0

GitBook

《reading-zepto》

內部方法 anim

function anim(el, speed, opacity, scale, callback) {
  if (typeof speed == "function" && !callback) callback = speed, speed = undefined
  var props = { opacity: opacity }
  if (scale) {
    props.scale = scale
    el.css($.fx.cssPrefix + "transform-origin", "0 0")
  }
  return el.animate(props, speed, null, callback)
}

如果 speed 的參數類型為函數，并且 callback 沒有傳遞，則認為 speed 位置的參數為 callback。

props 是過渡的屬性， fx_fethods 主要實現 show 、 hide 和 fadeIn、 fadeOut 等動畫，用到的過渡屬性為 opecity 和 scale 。

當為 scale 時，將轉換的原點設置為 0 0。

最后調用的是 fx 模塊中的 animate 方法。

hide

var document = window.document, docElem = document.documentElement,
    origShow = $.fn.show, origHide = $.fn.hide, origToggle = $.fn.toggle
function hide(el, speed, scale, callback) {
  return anim(el, speed, 0, scale, function(){
    origHide.call($(this))
    callback && callback.call(this)
  })
}

hide 方法其實就是將 opacity 的屬性設置為 0 。在動畫完成后，調用 origHide 方法，即原有的 hide 方法，將元素的 display 設置為 none。原有的 hide 方法分析見《讀Zepto源碼之樣式操作》

.show()

$.fn.show = function(speed, callback) {
  origShow.call(this)
  if (speed === undefined) speed = 0
  else this.css("opacity", 0)
  return anim(this, speed, 1, "1,1", callback)
}

show 方法首先調用原有的 hide 方法，將元素顯示出來，這是實現動畫的基本條件。

如果沒有設置 speed，表示不需要動畫，則過渡時間 speed 設置為 0。立即顯示元素。

否則，先將 opactity 設置為 0，再調用 anim 方法執行動畫。opacity 設置為 0 也是執行動畫的關鍵，從 0 變為 1 才有過渡的效果。

.hide()

$.fn.hide = function(speed, callback) {
  if (speed === undefined) return origHide.call(this)
  else return hide(this, speed, "0,0", callback)
}

如果 speed 沒有傳遞，簡單調用原有的 hide 方法即可，因為不需要過渡效果。

否則調用內部方法 hide。

.toggle()

$.fn.toggle = function(speed, callback) {
  if (speed === undefined || typeof speed == "boolean")
    return origToggle.call(this, speed)
  else return this.each(function(){
    var el = $(this)
    el[el.css("display") == "none" ? "show" : "hide"](speed, callback)
  })
}

toggle 方法是 show 和 hide 方法的切換。

如果 speed 沒有傳遞，或者為 boolean 值，則表示不需要動畫，調用原有的 toggle 方法即可。為什么要有一個 boolean 值的判斷呢，這要看回《讀Zepto源碼之樣式操作》關于 toggle 方法的分析了，原有的 toggle 方法接收一個參數，如果為 true，則指定調用 show 方法，否則調用 hide 方法。

否則，判斷每個元素的 display 屬性值，如果為 none，則調用 show 方法顯示，否則調用 hide 方法隱藏。

.fadeTo()

$.fn.fadeTo = function(speed, opacity, callback) {
  return anim(this, speed, opacity, null, callback)
}

fadeTo 可以其實是通過調節過渡時間 speed 和透明度 opacity 來實現動畫效果。

和 show 和 hide 不同的是，fadeTo 的 opacity 不一定為 1 或者 0，可以由調用者指定。

.fadeIn()

$.fn.fadeIn = function(speed, callback) {
  var target = this.css("opacity")
  if (target > 0) this.css("opacity", 0)
  else target = 1
  return origShow.call(this).fadeTo(speed, target, callback)
}

淡入效果。

fadeIn 其實調用的是 fadeTo ，跟 show 有點類似，最終將 opacity 變為 1 。只是不處理 scale 變形。

.fadeOut()

$.fn.fadeOut = function(speed, callback) {
  return hide(this, speed, null, callback)
}

淡出。

fadeOut 調用的是 hide 方法，只是不處理 scale 變形。

.fadeToggle()

$.fn.fadeToggle = function(speed, callback) {
  return this.each(function(){
    var el = $(this)
    el[
      (el.css("opacity") == 0 || el.css("display") == "none") ? "fadeIn" : "fadeOut"
    ](speed, callback)
  })
}

切換淡入淡出效果。

如果 display 為 node 時，調用 fadeIn 方法顯示，否則調用 fadeOut 方法隱藏。

系列文章

讀Zepto源碼之代碼結構

讀Zepto源碼之內部方法

讀Zepto源碼之工具函數

讀Zepto源碼之神奇的$

讀Zepto源碼之集合操作

讀Zepto源碼之集合元素查找

讀Zepto源碼之操作DOM

讀Zepto源碼之樣式操作

讀Zepto源碼之屬性操作

讀Zepto源碼之Event模塊

讀Zepto源碼之IE模塊

讀Zepto源碼之Callbacks模塊

讀Zepto源碼之Deferred模塊

讀Zepto源碼之Ajax模塊

讀Zepto源碼之Assets模塊

讀Zepto源碼之Selector模塊

讀Zepto源碼之Touch模塊

讀Zepto源碼之Gesture模塊

讀Zepto源碼之IOS3模塊

讀Zepto源碼之Fx模塊

參考 License

署名-非商業性使用-禁止演繹 4.0 國際 (CC BY-NC-ND 4.0)

最后，所有文章都會同步發送到微信公眾號上，歡迎關注,歡迎提意見：

作者：對角另一面

GPU云服務器云服務器讀源碼源碼中文說明之源碼編譯模塊 linux 模塊源碼

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88984.html

讀Zepto源碼之Stack模塊

摘要：讀源碼系列文章已經放到了上，歡迎源碼版本本文閱讀的源碼為改寫原有的方法模塊改寫了以上這些方法，這些方法在調用的時候，會為返回的結果添加的屬性，用來保存原來的集合。方法的分析可以看讀源碼之模塊。 Stack 模塊為 Zepto 添加了 addSelf 和 end 方法。讀 Zepto 源碼系列文章已經放到了github上，歡迎star: reading-zepto 源碼版本本文閱讀的...

crossea 2019-08-21 17:03 評論0 收藏0
讀Zepto源碼之Form模塊

摘要：模塊處理的是表單提交。表單提交包含兩部分，一部分是格式化表單數據，另一部分是觸發事件，提交表單。最終返回的結果是一個數組，每個數組項為包含和屬性的對象。否則手動綁定事件，如果沒有阻止瀏覽器的默認事件，則在第一個表單上觸發，提交表單。 Form 模塊處理的是表單提交。表單提交包含兩部分，一部分是格式化表單數據，另一部分是觸發 submit 事件，提交表單。讀 Zepto 源碼系列文章已...

陳江龍 2019-08-21 17:12 評論0 收藏0
讀Zepto源碼之Data模塊

摘要：的模塊用來獲取節點中的屬性的數據，和儲存跟相關的數據。獲取節點指定的緩存值。如果存在，則刪除指定的數據，否則將緩存的數據全部刪除。為所有下級節點，如果為方法，則節點自身也是要被移除的，所以需要將自身也加入到節點中。 Zepto 的 Data 模塊用來獲取 DOM 節點中的 data-* 屬性的數據，和儲存跟 DOM 相關的數據。讀 Zepto 源碼系列文章已經放到了github上，歡...

wua_wua2012 2019-08-21 17:14 評論0 收藏0
記一次頁面卡頓排查

摘要：記一次頁面卡頓排查前述前段時間上線的一個移動端的項目，由于開發時間倉促，一直被用戶投訴頁面卡頓。這顯然要導致卡頓。總結這只是頁面卡頓的一個點，當然還有很多，我們的頁面卡頓就是由這樣一個一個的點造成的。記一次頁面卡頓排查前述前段時間上線的一個移動端的項目，由于開發時間倉促，一直被用戶投訴頁面卡頓?，F在終于有時間來好好排查一下，看到底是什么原因。業務代碼都不是自己寫的，這是頗為頭疼的...

Lin_YT 2019-08-21 10:53 評論0 收藏0
2017-10-12 前端日報

摘要：前端日報精選帶來了什么以及對的解釋專題之亂序第期如何無痛降低面條代碼復雜度道阻且長啊前端面試總結附答案上前端安全知識中文開源許可證教程阮一峰的網絡日志裝飾器讓你的代碼更簡潔掘金什么是函數眾成翻譯和十分鐘快速入門眾成翻譯設計最佳實 2017-10-12 前端日報精選 React 16 帶來了什么以及對 Fiber 的解釋JavaScript專題之亂序【第1076期】如何無痛降低 if...

DangoSky 2019-08-21 17:00 評論0 收藏0