barba.jsとanime.jsでクールに画面遷移

　webサービスでのページ遷移をスムーズにできるbarba.jsを使って画面遷移をするときに手間取ったのでやり方を書いていきます。

　私が作ったページはこちら

　「はじめる」ボタンを押せばページ遷移が始まります。

barba.js

　barba.jsはwebページ間の遷移をネイティブのアプリケーションのように遷移するためのライブラリです。

　Github : https://github.com/luruke/barba.js

　導入にはnpmやcdnを使います。ここにはcdn用のコードを貼っておきます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/barba.js/1.0.0/barba.min.js" type="text/javascript"></script>

使い方

ページ遷移の際に読み込みたい部分を、

<div id="barba-wrapper">
  <div class="barba-container">
    
  </div>
</div>

　で囲みます。その後、

Barba.Pjax.start();

　とJavaScriptにかけばbarba.jsは最小限これで動きます。

設定

　まずは公式のデモのコードを見てみます。このコードを使うと上のbarba-wrapperで囲んだ範囲がフェードアウトして遷移先のbarba-wrapperで囲まれた部分がフェードインします。

var FadeTransition = Barba.BaseTransition.extend({
  start: function() {
    /**
     * This function is automatically called as soon the Transition starts
     * this.newContainerLoading is a Promise for the loading of the new container
     * (Barba.js also comes with an handy Promise polyfill!)
     */

    // As soon the loading is finished and the old page is faded out, let's fade the new page
    Promise
      .all([this.newContainerLoading, this.fadeOut()])
      .then(this.fadeIn.bind(this));
  },

  fadeOut: function() {
    /**
     * this.oldContainer is the HTMLElement of the old Container
     */

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

  fadeIn: function() {
    /**
     * this.newContainer is the HTMLElement of the new Container
     * At this stage newContainer is on the DOM (inside our #barba-container and with visibility: hidden)
     * Please note, newContainer is available just after newContainerLoading is resolved!
     */

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

    $(this.oldContainer).hide();

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

    $el.animate({ opacity: 1 }, 400, function() {
      /**
       * Do not forget to call .done() as soon your transition is finished!
       * .done() will automatically remove from the DOM the old Container
       */

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

/**
 * Next step, you have to tell Barba to use the new Transition
 */

Barba.Pjax.getTransition = function() {
  /**
   * Here you can use your own logic!
   * For example you can use different Transition based on the current page or link...
   */

  return FadeTransition;
};

(引用元：http://barbajs.org/)

　次のページのロードとfadeOut関数が終わるとfadeIn関数が呼ばれるようになっているようです。fadeOut関数とfadeIn関数の中身を書き換えれば自分の思い通りにページ遷移をすることができます。

　ページ遷移の関数を書いたら、　

Barba.Pjax.getTransition = function() {
  return 設定した関数名;
};

でページの切り替え時に、作った関数を使うように指定します。

　また、

Barba.Prefetch.init();

　とかくと、ホバーやクリック時に前もって遷移先のデータを取得し、よりスムーズにページを遷移することができます。

　ここに私が作ったデモのページ遷移用のコードを載せておきます。

Barba.Prefetch.init();

var PageTransition = Barba.BaseTransition.extend({
    start: function() {

        Promise
            .all([this.newContainerLoading, this.loadOut()])
            .then(this.loadIn.bind(this));
    },
    loadOut: function(resolve) {
        new Promise(function(resolve, reject) {
            anime({
                targets: this.oldContainer,
                translateY: '-50vw'
            });
            resolve();
        })
    },
    loadIn: function() {
        var _this = this;
        anime({
            targets: this.newContainer,
            translateY: ['80vh', 0],
            easing: 'easeInOutQuart'
        });
        $(this.oldContainer).hide();
        // 完了
        _this.done();
    },
});

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

Barba.Pjax.start();

　アニメーションはanime.jsで設定しています。ページはこちら。

まとめ

　barba.jsを使うと驚くほど綺麗にページを遷移できるので重宝しそう。