Barba - にほんご。

Transition

transition

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

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

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

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

メンバ説明
startページ遷移が始まると自動的に呼び出される関数です。 (言わばtransitionのコンストラクタです)
doneページ遷移が終了した時に呼び出す必要がある関数です。
この関数を忘れないでください!
oldContainer古いコンテナのHTMLElementです。
newContainerLoading新しいコンテナのローディングを示すPromiseです。
newContainer新しいコンテナのHTMLElementです。 (visibility: hidden;が付与されます。)
メモ:newContainerLoadingが完了するまでundefinedです。

基本的なページ遷移

通常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]


© 2016 Luigi De Rosa Released under the MIT license

このコンテンツはLuigi De Rosa(luruke)によるBarbaドキュメントを翻訳/改変したものです。