讀Zepto源碼之fx_methods模塊

時間 2019-11-30

標籤 zepto 源碼 methods 模塊简体版

原文原文鏈接

fx 模塊提供了 animate 動畫方法，fx_methods 利用 animate 方法，提供一些經常使用的動畫方法。因此 fx_methods 模塊依賴於 fx 模塊，在引入 fx_methods 前必須引入 fx 模塊。javascript

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

源碼版本

本文閱讀的源碼爲 zepto1.2.0java

GitBook

《reading-zepto》node

內部方法

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。git

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

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

最後調用的是 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 方法隱藏。