https://github.com/mattrothenberg/vue-overdrive

Super easy magic-move transitions for Vue apps
https://github.com/mattrothenberg/vue-overdrive

animations vue vue-router vuejs

Last synced: 16 days ago
JSON representation

Super easy magic-move transitions for Vue apps

• Host: GitHub
• URL: https://github.com/mattrothenberg/vue-overdrive
• Owner: mattrothenberg
• Created: 2018-02-09T16:30:53.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-07T20:28:30.000Z (almost 2 years ago)
• Last Synced: 2024-10-19T22:49:28.680Z (22 days ago)
• Topics: animations, vue, vue-router, vuejs
• Language: Vue
• Homepage:
• Size: 1.71 MB
• Stars: 684
• Watchers: 11
• Forks: 29
• Open Issues: 23
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
### Heads up!

The fate of this repo is uncertain. I recommend using my new library, [`vue-flip-toolkit`](https://github.com/mattrothenberg/vue-flip-toolkit) for all of your magic-move transition needs.



  



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

  

    


  


import * as easing from 'eases/quart-in-out' // Bring 'yr own easing functions!

export default {

  name: 'el-circle',

  data () {

    return {

      easing

    }

  }

}

  .circle {

    width: 100px;

    height: 100px;

    border-radius: 50%;

    background: blue;

    float: left;

  }

```

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 	|