zepto源码研究 - fx_methods.js

Posted 2020-08-12

简要：依赖fx.js，主要是针对show，hide，fadeIn，fadeOut的封装。

源码如下：

//  Zepto.js
//  (c) 2010-2015 Thomas Fuchs
//  Zepto.js may be freely distributed under the MIT license.

;(function($, undefined){
  var document = window.document, docElem = document.documentElement,
      origShow = $.fn.show, origHide = $.fn.hide, origToggle = $.fn.toggle// origShow展示    origHide隐藏  origToggle展示隐藏开关

  /**
   * 便捷动画的核心方法
   * @param el  DOM
   * @param speed 持续时间
   * @param opacity 不透明度
   * @param scale 缩放
   * @param callback 回调
   * @returns {*}
   */
  // anim 主要针对缩放和透明度的过渡效果
  // 对 animate方法的进一步的封装
  function anim(el, speed, opacity, scale, callback) {
    //修正参数  anim(el，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)//不支持速率变化，
  }

  /**
   * 底层方法：隐藏显示的元素
   * @param el
   * @param speed
   * @param scale
   * @param callback
   * @returns {*}
   */
  // TODO 这里既然是hide的功能，为什么还要传入scale参数 ，这里有点多余
  function hide(el, speed, scale, callback) {
    //不透明度设为0，即完全透明，相当于隐藏元素。这里的原理是播放不透明-透明的过渡。
    //具体代码为 $(dom).animate({opacity: 0, ‘-webkit-transform-origin‘: ‘0px 0px 0px‘, ‘-webkit-transform‘: ‘scale(0, 0)‘ },800)
    //设置了变形原点，缩放为0，它就会缩到左上角再透明
    return anim(el, speed, 0, scale, function(){
      origHide.call($(this)) //调用隐藏
      callback && callback.call(this)
    })
  }

  /**
   * 显示
   * @param speed  持续时间
   * @param callback   回调函数
   * @returns {*}
   */
  $.fn.show = function(speed, callback) {
    origShow.call(this)
    //具体代码为 $(dom).animate({opacity: 1, ‘-webkit-transform-origin‘: ‘0px 0px 0px‘, ‘-webkit-transform‘: ‘scale(1, 1)‘ },800)
    //设置了变形原点，缩放为0，它就会缩到左上角再透明
    if (speed === undefined) speed = 0
    // TODO 这个if，else有点奇怪
    else this.css(‘opacity‘, 0)
    return anim(this, speed, 1, ‘1,1‘, callback)
  }

  /**
   * 隐藏
   * @param speed      持续时间
   * @param callback   回调函数
   * @returns {*}
   */
  // TODO 为什么在上一不要封装出hide函数，难道其他地方有调用
  $.fn.hide = function(speed, callback) {
    if (speed === undefined) return origHide.call(this)
    else return hide(this, speed, ‘0,0‘, callback)
  }

  /**
   * 显示、隐藏开关
   * @param speed     持续时间
   * @param callback   回调函数
   * @returns {*}
   */
  $.fn.toggle = function(speed, callback) {
    if (speed === undefined || typeof speed == ‘boolean‘)
      return origToggle.call(this, speed)
    else return this.each(function(){
      var el = $(this)
      //这是toggle的关键逻辑
      el[el.css(‘display‘) == ‘none‘ ? ‘show‘ : ‘hide‘](speed, callback)
    })
  }

  /**
   * 淡入淡出
   * 原理： $(dom).animate({opacity: 1/0, ‘-webkit-transform-origin‘: ‘0px 0px 0px‘},800)
   * @param speed  持续时间
   * @param opacity 不透明度
   * @param callback  回调函数
   * @returns {*}
   */
  // 淡入淡出总函数
  $.fn.fadeTo = function(speed, opacity, callback) {
    return anim(this, speed, opacity, null, callback)
  }

  /**
   *  淡入
   * 原理： $(dom).animate({opacity: 1, ‘-webkit-transform-origin‘: ‘0px 0px 0px‘},800)
   * @param speed   持续时间
   * @param callback  回调函数
   * @returns {*}
   */
  $.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)
  }
  
  /**
   *  淡出
   * 原理： $(dom).animate({opacity: 0, ‘-webkit-transform-origin‘: ‘0px 0px 0px‘},800)
   * @param speed   持续时间
   * @param callback  回调函数
   * @returns {*}
   */
  // fadeOut 会将元素先变为透明，然后隐藏
  $.fn.fadeOut = function(speed, callback) {
    return hide(this, speed, null, callback)
  }

  /**
   * 淡入淡出开关
   * @param speed   持续时间
   * @param callback  回调函数
   * @returns {*}
   */
  $.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)
    })
  }

})(Zepto)

$.fn.show:

先调用原方法显示出来，如果参数有speed，callback则先让元素变透明调用anim逐步将元素显示出来，最后调用callback回调方法。

$.fn.hide:

和$.fn.show的过程相反，先调用anim将元素透明化，然后调用callback和原hide方法。当然，如果未传入参数，则直接隐藏。

$.fn.fadeIn:

首先将元素变为不透明，然后调用       origShow.call(this).fadeTo(speed,1, callback)；

$.fn.fadeOut:

直接调用：  hide(this, speed, null, callback)   注：$.fn.hide也调用了hide方法，但不同的是$.fn.hide要求非但透明化，并且以（0,0）为中心scale缩为0。