fx 模塊提供了 animate 動畫方法弯屈，fx_methods 利用 animate 方法蔽莱，提供一些常用的動畫方法捻激。所以 fx_methods 模塊依賴于 fx 模塊蛾娶，在引入 fx_methods 前必須引入 fx 模塊括勺。

讀 Zepto 源碼系列文章已經(jīng)放到了github上缆八，歡迎star: reading-zepto

源碼版本

本文閱讀的源碼為 zepto1.2.0

GitBook

《reading-zepto》

內(nèi)部方法

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 的參數(shù)類型為函數(shù)，并且 callback 沒有傳遞疾捍，則認為 speed 位置的參數(shù)為 callback奈辰。

props 是過渡的屬性， fx_fethods 主要實現(xiàn) show 乱豆、 hide 和 fadeIn奖恰、 fadeOut 等動畫，用到的過渡屬性為 opecity 和 scale 宛裕。

當為 scale 時瑟啃，將轉(zhuǎn)換的原點設置為 0 0。

最后調(diào)用的是 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 翰守。在動畫完成后，調(diào)用 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 方法首先調(diào)用原有的 hide 方法朗恳，將元素顯示出來湿颅，這是實現(xiàn)動畫的基本條件。

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

否則谊囚，先將 opactity 設置為 0， 再調(diào)用 anim 方法執(zhí)行動畫执赡。opacity 設置為 0 也是執(zhí)行動畫的關鍵镰踏，從 0 變?yōu)?1 才有過渡的效果。

.hide()

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

如果 speed 沒有傳遞沙合，簡單調(diào)用原有的 hide 方法即可奠伪，因為不需要過渡效果。

否則調(diào)用內(nèi)部方法 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 值，則表示不需要動畫滤否，調(diào)用原有的 toggle 方法即可脸狸。為什么要有一個 boolean 值的判斷呢，這要看回 《讀Zepto源碼之樣式操作》關于 toggle 方法的分析了藐俺，原有的 toggle 方法接收一個參數(shù)肥惭，如果為 true，則指定調(diào)用 show 方法紊搪，否則調(diào)用 hide 方法蜜葱。

否則，判斷每個元素的 display 屬性值耀石，如果為 none牵囤，則調(diào)用 show 方法顯示，否則調(diào)用 hide 方法隱藏滞伟。

.fadeTo()

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

fadeTo 可以其實是通過調(diào)節(jié)過渡時間 speed 和透明度 opacity 來實現(xiàn)動畫效果揭鳞。

和 show 和 hide 不同的是，fadeTo 的 opacity 不一定為 1 或者 0梆奈， 可以由調(diào)用者指定野崇。

.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 其實調(diào)用的是 fadeTo 亩钟，跟 show 有點類似乓梨，最終將 opacity 變?yōu)?1 。只是不處理 scale 變形清酥。

.fadeOut()

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

淡出扶镀。

fadeOut 調(diào)用的是 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 時，調(diào)用 fadeIn 方法顯示辱志，否則調(diào)用 fadeOut 方法隱藏蝠筑。

系列文章

1. 讀Zepto源碼之代碼結(jié)構
2. 讀Zepto源碼之內(nèi)部方法
3. 讀Zepto源碼之工具函數(shù)
4. 讀Zepto源碼之神奇的$
5. 讀Zepto源碼之集合操作
6. 讀Zepto源碼之集合元素查找
7. 讀Zepto源碼之操作DOM
8. 讀Zepto源碼之樣式操作
9. 讀Zepto源碼之屬性操作
10. 讀Zepto源碼之Event模塊
11. 讀Zepto源碼之IE模塊
12. 讀Zepto源碼之Callbacks模塊
13. 讀Zepto源碼之Deferred模塊
14. 讀Zepto源碼之Ajax模塊
15. 讀Zepto源碼之Assets模塊
16. 讀Zepto源碼之Selector模塊
17. 讀Zepto源碼之Touch模塊
18. 讀Zepto源碼之Gesture模塊
19. 讀Zepto源碼之IOS3模塊
20. 讀Zepto源碼之Fx模塊

參考

License

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

作者：對角另一面