fxモジュールはanimateアニメーションメソッドを提供し、fx_methodsはこのanimateメソッドを利用して、一般的なアニメーションメソッドを提供します。そのため、fx_methodsモジュールはfxモジュールに依存しており、fx_methodsをインポートする前にfxモジュールをインポートする必要があります。

内部メソッド

performAnimation

function performAnimation(element, duration, targetOpacity, scaleValue, completeCallback) {
  if (typeof duration === 'function' && !completeCallback) {
    completeCallback = duration;
    duration = undefined;
  }
  const animationProps = { opacity: targetOpacity };
  if (scaleValue) {
    animationProps.scale = scaleValue;
    element.css($.fx.cssPrefix + 'transform-origin', '0 0');
  }
  return element.animate(animationProps, duration, null, completeCallback);
}

durationのパラメータタイプが関数であり、かつcompleteCallbackが渡されていない場合、durationの位置のパラメータはcompleteCallbackと見なされます。

animationPropsはトランジションのプロパティです。fx_methodsは主にshow、hide、fadeIn、fadeOutなどのアニメーションを実装しており、使用されるトランジションプロパティはopacityとscaleです。

scaleが指定されている場合、変換の原点を0 0に設定します。

最終的にfxモジュールのanimateメソッドが呼び出されます。

executeHide

function executeHide(element, duration, scale, completeCallback) {
  return performAnimation(element, duration, 0, scale, function() {
    origHide.call($(this));
    if (completeCallback) completeCallback.call(this);
  });
}

executeHide関数は、opacityのプロパティを0に設定することで要素を非表示にします。アニメーションが完了した後、origHideメソッドが呼び出され、要素のdisplayがnoneに設定されます。元のhideメソッドの分析については、「Zeptoソースコードのスタイル操作」を参照してください。

.show()

$.fn.show = function(duration, callback) {
  origShow.call(this);
  if (duration === undefined) {
    duration = 0;
  } else {
    this.css('opacity', 0);
  }
  return performAnimation(this, duration, 1, '1,1', callback);
}

showメソッドはまず元のhideメソッドを呼び出し、要素を表示します。これがアニメーションの基本的な条件です。

durationが設定されていない場合、アニメーションは不要であることを意味し、トランジション時間durationは0に設定されます。要素を即座に表示します。

それ以外の場合、まずopacityを0に設定し、その後performAnimationメソッドを呼び出してアニメーションを実行します。opacityを0に設定することも、0から1に変化するトランジション効果を得るための鍵です。

.hide()

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

durationが渡されていない場合、元のhideメソッドを単に呼び出すだけで済みます。トランジション効果は不要だからです。

それ以外の場合は、内部メソッドexecuteHideを呼び出します。

.toggle()

$.fn.toggle = function(duration, callback) {
  if (duration === undefined || typeof duration === 'boolean') {
    return origToggle.call(this, duration);
  } else {
    return this.each(function() {
      const element = $(this);
      const currentDisplay = element.css('display');
      element[currentDisplay === 'none' ? 'show' : 'hide'](duration, callback);
    });
  }
}

toggleメソッドはshowとhideメソッドの切り替えです。

durationが渡されていない場合、またはboolean値の場合、アニメーションは不要であることを意味し、元のtoggleメソッドを呼び出すだけで済みます。なぜboolean値の判断が必要なのかについては、「Zeptoソースコードのスタイル操作」のtoggleメソッドの分析を参照してください。元のtoggleメソッドは1つのパラメータを受け取り、trueの場合はshowメソッドを呼び出すように指定し、そうでない場合はhideメソッドを呼び出します。

それ以外の場合、各要素のdisplayプロパティの値を判断し、noneの場合はshowメソッドを呼び出して表示し、そうでない場合はhideメソッドを呼び出して非表示にします。

.fadeTo()

$.fn.fadeTo = function(duration, targetOpacity, callback) {
  return performAnimation(this, duration, targetOpacity, null, callback);
}

fadeToは、トランジション時間durationと透明度targetOpacityを調整することでアニメーション効果を実現します。

showやhideとは異なり、fadeToのtargetOpacityは必ずしも1または0である必要はなく、呼び出し元が指定できます。

.fadeIn()

$.fn.fadeIn = function(duration, callback) {
  const currentOpacity = parseFloat(this.css('opacity'));
  const targetOpacity = currentOpacity > 0 ? 0 : 1;
  this.css('opacity', targetOpacity);
  return origShow.call(this).fadeTo(duration, 1, callback);
}

フェードイン効果。

fadeInは実際にはfadeToを呼び出しており、showと少し似ています。最終的にopacityを1にします。ただし、scaleの変形は処理しません。

.fadeOut()

$.fn.fadeOut = function(duration, callback) {
  return executeHide(this, duration, null, callback);
}

フェードアウト。

fadeOutはexecuteHideメソッドを呼び出しますが、scaleの変形は処理しません。

.fadeToggle()

$.fn.fadeToggle = function(duration, callback) {
  return this.each(function() {
    const element = $(this);
    const currentOpacity = parseFloat(element.css('opacity'));
    const currentDisplay = element.css('display');
    element[(currentOpacity === 0 || currentDisplay === 'none') ? 'fadeIn' : 'fadeOut'](duration, callback);
  });
}

フェードイン・フェードアウトの切り替え効果。

displayがnoneの場合、fadeInメソッドを呼び出して表示し、そうでない場合はfadeOutメソッドを呼び出して非表示にします。