vue-overdrive
Super easy magic-move transitions for Vue apps, powered by Ramjet
## Project Install
``` bash
# npm
npm install vue-overdrive
```
``` bash
# yarn
yarn add vue-overdrive
```
## Warning!
Currently, `vue-overdrive` isn't able to morph between shapes with percentage-based `border-radius` values. You'll need to use a pixel-based value, or you'll get a nasty `TypeError`. The issue is being tracked here: https://github.com/Rich-Harris/ramjet/issues/57
## Examples
### 1) Morph Shapes ([source](examples/src/router/index.js#L22-L38))
https://vue-overdrive.netlify.com/#/shapes
### 2) Material-esque transformation ([source](examples/src/router/index.js#L41-L53))
https://vue-overdrive.netlify.com/#/libraries
### 3) iOS-inspired icon effect ([source](examples/src/router/index.js#L54-L65))
https://vue-overdrive.netlify.com/#/icons
## What is it?
A Vue.js port of the amazing [React Overdrive](https://github.com/berzniz/react-overdrive), using [Ramjet](https://github.com/Rich-Harris/ramjet) under the hood.
## How does it work?
Just like with React Overdrive, wrap any two elements in a component. Add the same id to create a transition between the elements.
### Import and install
```js
import Overdrive from 'vue-overdrive'
Vue.use(Overdrive)
```
or
```js
import { VOverdrive } from 'vue-overdrive'
// Register the component locally
components: {
'overdrive': VOverdrive
}
```
### Set up (at least) two different routes with Vue Router
Inside your routes file –
```js
{
path: '/circle',
name: 'Circle',
component: Circle
},
{
path: '/rectangle',
name: 'Rectangle',
component: Rectangle
}
```
### Scaffold your components
In `Circle.vue`:
```vue
```
And in `Rectangle.vue` –
```vue
```
### Usage with `v-if`
If you're not using Vue Router (and instead using Vue's built-in `v-if` directive), be sure to specify a unique `key` prop on each instance of ``
```vue
```
### Customize it (API)
| Prop | Description | Default Value |
|---------- |------------------------------------------------------ |----------------- |
| id | Required. A unique string or number to identify the component. | |
| tag | Wrapping element type | `div` |
| duration | Animation duration (in milliseconds) | `250` |
| easing | Easing Function (must pass a function) | `ramjet.linear` |
| Event | Description |
|------------------ |----------------------------------------------- |
| `@animation-end` | Fires once the ramjet animation has completed |