Transition

transition

transitionは古いコンテナを隠して、新しいコンテナを表示する JavaScriptオブジェクトです。

transitionはBarba.BaseTransitonオブジェクトを拡張する必要があります。

メモ：ページ遷移は新しいページをロードする前に開始します。 このように、次のページがロードされる前でもページ遷移を開始することができます。

このオブジェクトを拡張すると以下のメンバを継承します。

基本的なページ遷移

通常barba.jsは、ただのHideShow(非表示→表示)のページ遷移です。 どのように動くか理解するために作成してみましょう。

var HideShowTransition = Barba.BaseTransition.extend({
  start: function() {
    this.newContainerLoading.then(this.finish.bind(this));
  },

  finish: function() {
    document.body.scrollTop = 0;
    this.done();
  }
});

お気づきのように、Promiseを使っています。 barba.jsには便利なPromiseのpolyfillもあります。

次に、作成したページ遷移を指定します

Barba.Pjax.getTransition = function() {
  return HideShowTransition;
};

[デモ - Basic]

フェードインアウト

次はより複雑なページ遷移を作成してみましょう。 FadeTransitionはjQueryの.animate()を使います。

もちろん他のJSライブラリを使っても良いですし、 手書きのスクリプトや、CSSのtransitionでも、 どんな方法でも構いません。

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;
};

[デモ - Fade]