Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Orlandster/vue-page-transition
A lightweight Vue.js plugin for page / route transitions.
https://github.com/Orlandster/vue-page-transition
vue vue-components vue-translations vuejs vuejs2
Last synced: about 2 months ago
JSON representation
A lightweight Vue.js plugin for page / route transitions.
- Host: GitHub
- URL: https://github.com/Orlandster/vue-page-transition
- Owner: Orlandster
- License: mit
- Created: 2019-04-06T12:07:25.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-08T21:37:06.000Z (almost 2 years ago)
- Last Synced: 2024-07-09T14:40:33.739Z (2 months ago)
- Topics: vue, vue-components, vue-translations, vuejs, vuejs2
- Language: HTML
- Homepage: https://orlandster.github.io/vue-page-transition
- Size: 41.6 MB
- Stars: 401
- Watchers: 10
- Forks: 35
- Open Issues: 35
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-page-transition
[ ](https://www.npmjs.com/package/vue-page-transition)
[](https://vuejs.org/)
[](https://www.codacy.com/app/orlando.wenzinger/vue-typed-js?utm_source=github.com&utm_medium=referral&utm_content=Orlandster1998/vue-typed-js&utm_campaign=Badge_Grade)
A lean Vue.js plugin for page / route transitions.
## Table of contents
- [Installation](#installation)
- [Usage](#usage)
- [Transitions](#transitions)
- [Demo](#demo)
# Installation
```bash
yarn add vue-page-transition
```
or with npm
```
npm install vue-page-transition
```
## Default import
Install the component:
```javascript
import Vue from 'vue'
import VuePageTransition from 'vue-page-transition'
Vue.use(VuePageTransition)
```
## Browser import
```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)
```
# Usage
To get started simply wrap your `router-view` with the `vue-page-transition` component.
Minimal setup:
```html
```
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:
```html
```
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. 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](#vue-page-transition)
- [Table of contents](#table-of-contents)
- [Installation](#installation)
- [Default import](#default-import)
- [Browser import](#browser-import)
- [Usage](#usage)
- [Properties / Attributes](#properties--attributes)
- [Overwrite transiton for single route](#overwrite-transiton-for-single-route)
- [Transitions](#transitions)
- [Fade](#fade)
- [Default Fade](#default-fade)
- [Up](#up)
- [Right](#right)
- [Down](#down)
- [Left](#left)
- [Overlay](#overlay)
- [Overlay Up](#overlay-up)
- [Overlay Right](#overlay-right)
- [Overlay Down](#overlay-down)
- [Overlay Left](#overlay-left)
- [Overlay Down Full](#overlay-down-full)
- [Overlay Right Full](#overlay-right-full)
- [Overlay Up Full](#overlay-up-full)
- [Overlay Left Full](#overlay-left-full)
- [Overlay Up Down](#overlay-up-down)
- [Overlay Left Right](#overlay-left-right)
- [Flip](#flip)
- [Flip X](#flip-x)
- [Flip Y](#flip-y)
- [Zoom](#zoom)
- [Default Zoom](#default-zoom)
- [Demo](#demo)
- [License](#license)
## 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:**
```html
...
```
### Up
The old page smoothly disappears, while the new page fades in from the bottom.
**Usage:**
```html
...
```
### Right
The old page smoothly disappears, while the new page fades in from right.
**Usage:**
```html
...
```
### Down
The old page smoothly disappears, while the new page fades in from top.
**Usage:**
```html
...
```
### Left
The old page smoothly disappears, while the new page fades in from left.
**Usage:**
```html
...
```
## Overlay
### Overlay Up
The overlay grows from the bottom to the top and back.
**Usage:**
```html
...
```
### Overlay Right
The overlay grows from the left to the right and back.
**Usage:**
```html
...
```
### Overlay Down
The overlay grows from the top to the bottom and back.
**Usage:**
```html
...
```
### Overlay Left
The overlay grows from the right to the left and back.
**Usage:**
```html
...
```
### Overlay Down Full
The overlay grows from the top to the bottom and then shrinks from top to the bottom.
**Usage:**
```html
...
```
### Overlay Right Full
The overlay grows from the left to the right and then shrinks from left to the right.
**Usage:**
```html
...
```
### Overlay Up Full
The overlay grows from the bottom to the top and then shrinks from bottom to the top.
**Usage:**
```html
...
```
### Overlay Left Full
The overlay grows from the left to the right and then shrinks from left to the right.
**Usage:**
```html
...
```
### Overlay Up Down
The overlay grows from the bottom and top at the same time and back.
**Usage:**
```html
...
```
### Overlay Left Right
The overlay grows from the left and right at the same time and back.
**Usage:**
```html
...
```
## Flip
### Flip X
The old page flips horizontally into the new page.
**Usage:**
```html
...
```
### Flip Y
The old page flips vertically into the new page.
**Usage:**
```html
...
```
## Zoom
### Default Zoom
The old page smoothly zooms out and then new page zooms in.
**Usage:**
```html
...
```
# Demo
Checkout the demo [here](https://orlandster.github.io/vue-page-transition).
---
# License
[MIT](http://opensource.org/licenses/MIT)