A page transition plugin for vue-router
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
example
lib
umd
.babelrc
.eslintrc
.gitignore
.npmignore
LICENSE
README.md
index.js
package.json
webpack.config.js add eslint Jul 21, 2016

README.md

【Deprecated】 vue-router-transition

npm npm

A page transition plugin for vue-router 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'
  }
}