vue-overdrive - GitLite

KO | EN

gitlite — search

#javascript #ai #go #golang #android #rust #docker #macos #nodejs #vue #pytorch #mcp #openai #open-source

vue-overdrive

(★ 674)

Super easy magic-move transitions for Vue apps

파일 탐색기

최종 버전 다운로드 (.zip)

- settings.json
- overdrive.esm.js
- overdrive.min.js
- overdrive.umd.js
- - build.js
  - check-versions.js
  - logo.png
  - utils.js
  - vue-loader.conf.js
  - webpack.base.conf.js
  - webpack.dev.conf.js
  - webpack.prod.conf.js
- - dev.env.js
  - index.js
  - prod.env.js
- - App.vue
  - main.js
- - .gitkeep
  - ember.png
  - logo.png
  - react.png
  - vue.png
- .babelrc
- .editorconfig
- .gitignore
- .postcssrc.js
- index.html
- package.json
- README.md
- yarn.lock
- index.js
- Overdrive.vue
.babelrc
.eslintrc
.gitignore
.npmignore
ISSUE_TEMPLATE.md
package.json
README.md
rollup.config.js
yarn.lock

# 설치 가이드

1. 코드 내려받기

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

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd vue-overdrive

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

<img src="https://badge.fury.io/js/vue-overdrive.svg" alt="npm version">

이 명령어를 터미널에 그대로 입력해 실행하세요.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

### 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.

<p align="center">
  <img width="120" src="https://dzwonsemrish7.cloudfront.net/items/0P31353w2O3M130M2K3r/Artboard%201.png"/>
</p>

<h2 align="center">vue-overdrive</h2>
<h5 align="center">Super easy magic-move transitions for Vue apps, powered by Ramjet</h5>
<p align="center">
  <a href="https://badge.fury.io/js/vue-overdrive">
    <img src="https://badge.fury.io/js/vue-overdrive.svg" alt="npm version">
  </a>
</p>

## 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

<img src="https://thumbs.gfycat.com/GlamorousThoroughHumpbackwhale-size_restricted.gif" alt="Material" width="320"/>

### 1) Morph Shapes ([source](examples/src/router/index.js#L22-L38))
https://vue-overdrive.netlify.com/#/shapes

<img src="https://imgur.com/YRwM2T8.gif" alt="Shape morph" width="320"/>

### 2) Material-esque transformation ([source](examples/src/router/index.js#L41-L53))
https://vue-overdrive.netlify.com/#/libraries

<img src="https://imgur.com/B6BYxRv.gif" alt="Material transformation" width="320"/>

### 3) iOS-inspired icon effect ([source](examples/src/router/index.js#L54-L65))
https://vue-overdrive.netlify.com/#/icons

<img src="https://imgur.com/vrb7QQ2.gif" alt="iOS icon effect" width="320"/>

## 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 <overdrive id=""></overdrive> 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
<template>
  <overdrive id="element" :easing="easing" :duration="350">
    <div class="circle"></div>
  </overdrive>
</template>

<script>
import * as easing from 'eases/quart-in-out' // Bring 'yr own easing functions!
export default {
  name: 'el-circle',
  data () {
    return {
      easing
    }
  }
}
</script>

<style scoped>
  .circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: blue;
    float: left;
  }
</style>

```

And in `Rectangle.vue` –

```vue
<template>
  <overdrive id="element">
    <div class="rectangle"></div>
  </overdrive>
</template>
```

### 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 `<overdrive>`

```vue
<overdrive key="a" id="window" :duration="450" v-if="!windowOpen">
  
</overdrive>
<overdrive key="b" id="window" :duration="450" v-if="windowOpen">
  
</overdrive>
```

### 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 	|