❤
npm
Sign UpSign In

vue-router-transition

1.0.9 • Public • Published

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

Readme

Keywords

Package Sidebar

Install

npm i vue-router-transition

Repository

github.com/weinot/vue-router-transition

Homepage

github.com/weinot/vue-router-transition#readme

Weekly Downloads

8

Version

1.0.9

License

MIT

Last publish

Collaborators

  • vnot
Try on RunKit
Report malware