vue-page-transition
A lean Vue.js plugin for page / route transitions.
Table of contents
Installation
yarn add vue-page-transition
or with npm
npm install vue-page-transition
Default import
Install the component:
Vue
Browser import
The plugin should be auto-installed. If not, you can install it manually with the instructions below.
Install all the components:
Vue
Usage
To get started simply wrap your router-view
with the vue-page-transition
component.
Minimal setup:
As a default the fade
animation will be applied. If you want to use another animation you can do so by passing it via the name
attribute:
You can find a list of all available transitions in the following section.
Notice: You can use the
vue-page-transition
component to wrap any element you would like to. Therouter-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:
Transitions
Here you can find a list of all the available transitions so far.
Fade
The default fade transtion smoothly changes the opacity between two elements / pages with the additional ability to add some direction.
Default Fade
The default fade transtion smoothly changes the visibility of the pages without any directional change.
Usage:
...
Up
The old page smoothly disappears, while the new page fades in from the bottom.
Usage:
...
Right
The old page smoothly disappears, while the new page fades in from right.
Usage:
...
Down
The old page smoothly disappears, while the new page fades in from top.
Usage:
...
Left
The old page smoothly disappears, while the new page fades in from left.
Usage:
...
Overlay
Overlay Up
The overlay grows from the bottom to the top and back.
Usage:
...
Overlay Right
The overlay grows from the left to the right and back.
Usage:
...
Overlay Down
The overlay grows from the top to the bottom and back.
Usage:
...
Overlay Left
The overlay grows from the right to the left and back.
Usage:
...
Overlay Down Full
The overlay grows from the top to the bottom and then shrinks from top to the bottom.
Usage:
...
Overlay Right Full
The overlay grows from the left to the right and then shrinks from left to the right.
Usage:
...
Overlay Up Full
The overlay grows from the bottom to the top and then shrinks from bottom to the top.
Usage:
...
Overlay Left Full
The overlay grows from the left to the right and then shrinks from left to the right.
Usage:
...
Overlay Up Down
The overlay grows from the bottom and top at the same time and back.
Usage:
...
Overlay Left Right
The overlay grows from the left and right at the same time and back.
Usage:
...
Flip
Flip X
The old page flips horizontally into the new page.
Usage:
...
Flip Y
The old page flips vertically into the new page.
Usage:
...
Zoom
Default Zoom
The old page smoothly zooms out and then new page zooms in.
Usage:
...
Demo
Checkout the demo here.