Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: 12 days ago
JSON representation

A lightweight Vue.js plugin for page / route transitions.

Awesome Lists containing this project

README

        

# vue-page-transition

![](demo.gif)

[![npm](https://img.shields.io/npm/v/vue-page-transition.svg) ![npm](https://img.shields.io/npm/dm/vue-page-transition.svg)](https://www.npmjs.com/package/vue-page-transition)
[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)
[![Codacy Badge](https://api.codacy.com/project/badge/Grade/8789841c45264d19ad2595061437a8a9)](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)