Vue Animation Timeline

English | 简体中文

✨ 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

$3


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

$3

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

$3

##### onUpdate: Update widgets configs，The parameter is the widgets` array to which the animation configuration has been added

License

MIT

Copyright (c) 2021 Dong Xing