A lean Vue.js plugin for page / route transitions.
npm install vue-page-transition
A lean Vue.js plugin for page / route transitions.
- Installation
- Usage
- Transitions
- Demo
``bash`
yarn add vue-page-transition
or with npm
`
npm install vue-page-transition
Install the component:
`javascript
import Vue from 'vue'
import VuePageTransition from 'vue-page-transition'
Vue.use(VuePageTransition)
`
`html`
The plugin should be auto-installed. If not, you can install it manually with the instructions below.
Install all the components:
`javascript`
Vue.use(VuePageTransition)
with the vue-page-transition component.Minimal setup:
`html
`
As a default the animation will be applied. If you want to use another animation you can do so by passing it via the name attribute:
`html
`You can find a list of all available transitions in the following section.
> Notice: You can use the
component to wrap any element you would like to. The router-view is just the most commone use case.Properties / Attributes
You can make use of the following properties in order to customize your typing expirience:| Property | Type | Description | Example |
|----------|--------|-------------------------------------|--------------------------|
| name | String | The name of the desired transition. |
name="'fade-in-right'" |Overwrite transiton for single route
We've now covered how to set up a global transition by using the name attribute. But what if I want to use multiple transitions depending on the route? In this case you can simple add a transition property to the meta fields of your specific route. Here's an example on how your router could look like:
`js
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld,
// overwrite default transition
meta: { transition: 'zoom' },
},
]
})
`Transitions
Here you can find a list of all the available transitions so far.- vue-page-transition
- Table of contents
- Installation
- Default import
- Browser import
- Usage
- Properties / Attributes
- Overwrite transiton for single route
- Transitions
- Fade
- Default Fade
- Up
- Right
- Down
- Left
- Overlay
- Overlay Up
- Overlay Right
- Overlay Down
- Overlay Left
- Overlay Down Full
- Overlay Right Full
- Overlay Up Full
- Overlay Left Full
- Overlay Up Down
- Overlay Left Right
- Flip
- Flip X
- Flip Y
- Zoom
- Default Zoom
- Demo
- License
Fade
The default fade transtion smoothly changes the opacity between two elements / pages with the additional ability to add some direction.$3
The default fade transtion smoothly changes the visibility of the pages without any directional change.Usage:
html
...
`$3
The old page smoothly disappears, while the new page fades in from the bottom.Usage:
html
...
`$3
The old page smoothly disappears, while the new page fades in from right.Usage:
html
...
`$3
The old page smoothly disappears, while the new page fades in from top.Usage:
html
...
`$3
The old page smoothly disappears, while the new page fades in from left.Usage:
html
...
`Overlay
$3
The overlay grows from the bottom to the top and back.Usage:
html
...
`$3
The overlay grows from the left to the right and back.Usage:
html
...
`$3
The overlay grows from the top to the bottom and back.Usage:
html
...
`$3
The overlay grows from the right to the left and back.Usage:
html
...
`$3
The overlay grows from the top to the bottom and then shrinks from top to the bottom.Usage:
html
...
`$3
The overlay grows from the left to the right and then shrinks from left to the right.Usage:
html
...
`$3
The overlay grows from the bottom to the top and then shrinks from bottom to the top.Usage:
html
...
`$3
The overlay grows from the left to the right and then shrinks from left to the right.Usage:
html
...
`$3
The overlay grows from the bottom and top at the same time and back.Usage:
html
...
`$3
The overlay grows from the left and right at the same time and back.Usage:
html
...
`Flip
$3
The old page flips horizontally into the new page.Usage:
html
...
`$3
The old page flips vertically into the new page.Usage:
html
...
`Zoom
$3
The old page smoothly zooms out and then new page zooms in.Usage:
html
...
``---