Barba v2

barba.js

// Internally, do something like this

Promise
  .all([
    this.loadNewContent,
    this.transitionOut({
      fromRoute,
      event,
      oldContainer,
      promise
    })
  ])
  .then(this.transitionIn({
    fromRoute,
    event,
    oldContainer,
    newContainer,
    promise
  }))

main.js

import Barba from 'barba.js'

// Github says "Contents files can't be in subdirectories or include '/' in the name" but these should be in a subdir
import home from 'routes.home.js'
import post from 'routes.post.js'
import posts from 'routes.posts.js'

Barba.init({
  routes: [home, post, posts], // Order would be important, when looking for `path` property
  opts: {},
  defaults: {
    onEnter() {},
    onLeave() {},
    transitionIn({fromRoute, event, oldContainer, newContainer, promise}) {},
    transitionOut({toRoute, event, oldContainer, promise}) {} // Out transition can't have `newContainer` yet
  }
})

// Barba.addRoute(...)
// Barba.goTo(...)

routes.home.js

export default {
  name: 'home',
  path: '/',
  onEnter() {
    // init components for this page, like a slider, calendar, ...
  },
  onLeave() {
    // destroy components to avoid memory leaks
  },
  transitionIn({fromRoute, event, oldContainer, newContainer, promise}) {
    // do some animation
    promise.resolve()
  },
  transitionOut({toRoute, event, oldContainer, promise}) {
    if( toRoute.name === 'blog' ) {
      // do animation
      promise.resolve()
    } else {
      // do another animation
      promise.resolve()
    }
  }
}

routes.post.js

export default {
  name: 'post',
  path: '/news/*',
  onEnter() {},
  onLeave() {},
  transitionIn({fromRoute, event, oldContainer, newContainer, promise}) {},
  transitionOut({toRoute, event, oldContainer, promise}) {}
}

routes.posts.js

export default {
  name: 'posts',
  path: '/news',
  onEnter() {},
  onLeave() {},
  transitionIn({fromRoute, event, oldContainer, newContainer, promise}) {},
  transitionOut({toRoute, event, oldContainer, promise}) {}
}