Transition

A transition is a Javascript object that will make sure to hide the old container and display the new one.

All the transitions need to extend the Barba.BaseTransiton object.

Please note: the transition starts even before the new page is loaded. This way you can start your own transition even before the next page is loaded.

Extending this object your transition will inherit the following members:

Member	Description
`start`	`function` that will be called automatically when your transition starts. (you can consider it the constructor of your transition)
`done`	`function` that needs to be called when your transition is finished. Do not forget to call this function!
`oldContainer`	`HTMLElement` of the old container.
`newContainerLoading`	`Promise` that will indicate the loading of the next container.
`newContainer`	`HTMLElement` of the new container. (with `visibility: hidden;`) Please note, it's `undefined` until `newContainerLoading` is resolved!

HideShow Example

By default barba.js uses a simple HideShow transition. In order to understand how it works, let's recreate it:

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

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

As you noticed we used a Promise; barba.js also comes with an handy Promise polyfill.

Next, we have to tell barba.js to use our new transition:

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

FadeTransition Example

Let's create now a more complex transition, a FadeTransition using jQuery's .animate()

Of course you can use any JS library, plain Javascript method, CSS transitions, or something else instead.

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