https://github.com/weinot/vue-router-transition

A page transition plugin for vue-router
https://github.com/weinot/vue-router-transition

Last synced: 3 months ago
JSON representation

A page transition plugin for vue-router

• Host: GitHub
• URL: https://github.com/weinot/vue-router-transition
• Owner: repairearth
• License: mit
• Created: 2016-07-20T09:54:49.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-02-13T03:41:13.000Z (almost 8 years ago)
• Last Synced: 2024-10-29T10:45:20.470Z (3 months ago)
• Language: JavaScript
• Homepage:
• Size: 420 KB
• Stars: 110
• Watchers: 3
• Forks: 22
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-github-vue - vue-router-transition - 页面过渡插件 (实用库)
• awesome - vue-router-transition - 页面过渡插件 (实用库)
• awesome-github-vue - vue-router-transition - 页面过渡插件 (实用库)
• awesome-vue - vue-router-transition - router-transition?style=social) - 页面过渡插件 (实用库)

README

        
# **【Deprecated】** ~~vue-router-transition~~

[![npm](https://img.shields.io/npm/v/vue-router-transition.svg?style=flat)](https://www.npmjs.com/package/vue-router-transition)

[![npm](https://img.shields.io/npm/dt/vue-router-transition.svg?style=flat)](https://www.npmjs.com/package/vue-router-transition)

A page transition plugin for vue-router [demo](http://vnot.me/vue-router-transition/)

## Usage

```js

...

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`

// or

Vue.transition('slideFromRightToLeft', {})

Vue.transition('slideFromLeftToRight', {})

```

## Your CSS

```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

```js

'/message': {

  component: require('./views/subroutes/sr2.vue'),

  $$routerTransition: {

    forward: 'roll',

    back: 'roll'

  }

}

```