Fade

フェードイン/アウトでページ1とページ2を切り替えます。

HTML

1.html

<div id="barba-wrapper">
  <div class="barba-container">
    <p>ページ1</p>
    <p>
      <a href="./2.html">ページ2を表示</a>
    </p>
  </div>
</div>

2.html

<div id="barba-wrapper">
  <div class="barba-container">
    <p>ページ2</p>
    <p>
      <a href="./1.html">ページ1を表示</a>
    </p>
  </div>
</div>

JavaScript

Barba.Pjax.start();
var FadeTransition = Barba.BaseTransition.extend({
  start: function() {
    /**
     * この関数はページ遷移が始まったらすぐに自動的に呼び出されます。
     * this.newContainerLoadingは新しいコンテナのローディングを示すpromiseです。
     * (barba.jsには便利なPromiseのpolyfillもあります。)
     */

    // ローディングが終わるとすぐに、
    // 古いページをフェードアウトさせて、新しいページをフェードインします
    Promise
      .all([this.newContainerLoading, this.fadeOut()])
      .then(this.fadeIn.bind(this));
  },

  fadeOut: function() {
    /**
     * this.oldContainerは古いコンテナのHTMLElementです。
     */

    return $(this.oldContainer).animate({ opacity: 0 }).promise();
  },

  fadeIn: function() {
    /**
     * this.newContainerは新しいコンテナのHTMLElementです。
     * この段階でnewContainerはDOM上に含まれています。
     * (#barba-container内にあり、visibility: hiddenです。)
     * メモ：newContainerはnewContainerLoadingを解決した後に利用できます。
     */

    var _this = this;
    var $el = $(this.newContainer);

    $(this.oldContainer).hide();

    $el.css({
      visibility : 'visible',
      opacity : 0
    });

    $el.animate({ opacity: 1 }, 400, function() {
      /**
       * 遷移が終了したら.done()を呼び出すのを忘れないでください！
       * .done()は自動的にDOMから古いコンテナを削除します。
       */

      _this.done();
    });
  }
});

/**
 * 次に、Barbaに作成した遷移処理を指定します。
 */

Barba.Pjax.getTransition = function() {
  /**
   * ここでロジックと遷移処理を指定できます！
   * 例えばページ毎や、リンク毎に別の遷移処理を指定することができます。
   */

  return FadeTransition;
};