barbajs-Transition

transition 是一个Javascript对象，它将确保隐藏旧的容器并显示新的容器。
所有的transitions都需要扩展自Barba.BaseTransiton对象。

请注意：即使在加载新页面之前，转换也会开始。这样，即使在加载下一页之前，您也可以开始自己的转换。

成员	描述
start	当你的转场动画开始时会自动调用这个函数。 （你可以认为它是转场函数的构造函数）
done	当您的转场动画完成时需要调用的函数。 不要忘了调用这个功能！
oldContainer	旧container的HTMLElement.
newContainerLoading	Promise 表示在加载下一个容器。
newContainer	新容器的HTMLElement。 （状态是visibility: hidden;） 请注意，在newContainerLoading状态是resolved之前它是undefined！

HideShow 例子
默认情况下，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();
  }
});

接下来，我们必须告诉barba.js使用我们的新过渡：

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

渐变例子
现在让我们创建一个更复杂的转换，一个使用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;
};