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>
<script src="../../js/jquery-3.2.1.min.js"></script>
2.html
<div id="barba-wrapper">
  <div class="barba-container">
    <p>ページ2</p>
    <p><a href="./1.html">ページ1を表示</a></p>
  </div>
</div>
<script src="../../js/jquery-3.2.1.min.js"></script>

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