vue-router-transition

vue-router-transition

Live Demo

Usage

...
import VueRouter from 'vue-router'
import VueRouterTransition from 'vue-router-transition'
...

// install router
Vue.use(VueRouter)
Vue.use(VueRouterTransition, VueRouter)

// in app.vue, apply directive `v-r-transition`
<router-view class="view" transition v-r-transition keep-alive></router-view>

// or

<router-view 
  class="view" 
  transition 
  v-r-transition="{forward: 'slideFromRightToLeft', back: 'slideFromLeftToRight'}" 
  keep-alive>
</router-view>

Vue.transition('slideFromRightToLeft', {})
Vue.transition('slideFromLeftToRight', {})

Your CSS

.view {
  transition: all .5s ease;
}

/* v-r-transition, default is {forward: 'forward', back: 'back'}*/
.forward-enter, .forward-leave {
  transform: translate3d(-100%, 0, 0);
}
.back-enter, .back-leave {
  transform: translate3d(100%, 0, 0);
}

Page level transition

For page level transition, define custom field '$$routerTransition' in the route config

'/message': {
  component: require('./views/subroutes/sr2.vue'),
  $$routerTransition: {
    forward: 'roll',
    back: 'roll'
  }
}