transition 是一個Javascript對象，它將確保隱藏舊的容器并顯示新的容器。
所有的transitions都需要擴展自Barba.BaseTransiton對象。

請注意：即使在加載新頁面之前，轉換也會開始。這樣，即使在加載下一頁之前，您也可以開始自己的轉換。

HideShow 例子
默認情況下，barba.js使用一個簡單的HideShow轉場動畫。為了理解它是如何工作的，讓我們重新創(chuàng)建它：

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

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

接下來，我們必須告訴barba.js使用我們的新過渡：

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

漸變例子
現在讓我們創(chuàng)建一個更復雜的轉換，一個使用jQuery的.animate（）的FadeTransition

當然你可以用任何的js庫，js方法，css轉換，或任何的其他形式

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