Vue Animation Timeline
A visual element animation configuration editor based on timeline。
![github][github] ![npm][npm] ![support][support] ![jetBrains][jetBrains]
[github]:https://img.shields.io/github/license/WX-DongXing/vue-animation-timeline?style=flat&logo=github
[npm]:https://img.shields.io/npm/v/vue-animation-timeline?style=flat&logo=npm
[support]:https://img.shields.io/badge/support-2%263-%234FC08D?style=flat&logo=Vue.js
[jetBrains]:https://img.shields.io/badge/thanks-JetBrains-%23000?style=flat&logo=jetBrains
English | [简体中文](./docs/README.zh-CN.md)
## ✨ Features
- 🚀 Visual element animation configuration based on timeline
- 💫 Support CSS Transform animation Properties
- ✅ Compatible with vue2.x and vue3
## 📦 Install
##### vue2.x
```bash
yarn add vue-animation-timeline
```
##### vue3
```bash
yarn add vue-animation-timeline@next
```
## 🧐 Usage
##### vue2.x
```javascript
import Vue from 'vue';
import VueAnimationTimeline from 'vue-animation-timeline';
Vue.use(VueAnimationTimeline)
```
##### vue3
```javascript
import { createApp } from 'vue';
import VueAnimationTimeline from 'vue-animation-timeline';
const app = createApp({});
app.use(VueAnimationTimeline);
app.mount('#app');
```
## 💡 Example
```vue
```
## 🔧 Config
### Properties
##### `widgets`: Element arrays
##### `fields`: Field mapping
| Properties | Description |
|--------|---------------------|
| key | Unique identifier |
| name | Name field mapping，default 'name' |
| width | Width field mapping，default 'width' |
| height | Width field mapping，default 'width' |
| top | Absolute positioning top field mapping，default 'top' |
| left | Absolute positioning left field mapping，default 'left' |
### Instance Properties
##### `$animate`: animate instance
| Function | Description |
|--------|---------------------|
| play | Execute animation |
| pause | Pause animation |
| restart | Restart animation |
| seek | Execute animation to a given time，example animate.seek(1000): execute animation to 1s |
### Shortcut Key
| Key | Description |
|--------|---------------------|
| space | Play And Pause |
| ⌘ + backspace | Back |
| ⌘ + enter | Restart |
| ← | Decrease 20ms |
| → | Increase 20ms |
| control + shift + ← | Jump To Previous Anchor |
| control + shift + → | Jump To Next Anchor |
### Event
##### `onUpdate`: Update current widget configs
##### `onSelect`: Select current widget
## License
[MIT](http://opensource.org/licenses/MIT)
Copyright (c) 2021 Dong Xing