Vuenime
A flexible Vue wrapper for Animejs
npm install vuenime# or yarn add vuenime
Usage
In a component:
<template> <div> <p> <label for="countInput">Value:</label> <input id="countInput" v-model.lazy="count" type="number" min="0" > </p> <vuenime :value="count" duration="1500" v-slot="theCount" > <div> <code>Width: {{theCount}}px</code> <div :style="{ backgroundColor: 'green', width: `${theCount}px`, }" /> </div> </vuenime> </div></template> <script>import { Vuenime } from 'vuenime'; export default { components: { Vuenime }, data () { return { count: 42, }; },};</script>
Global registration:
;; Vue;
Props
Name | Type | Required | |
---|---|---|---|
value |
Number | String | Array | Object |
yes | The animation target |
render |
Function |
no | Render function. Use this prop to avoid scoped slots definition in JSX. |
Animation parameters
Cover Anime property and animation parameters.
Name | Type | Default |
---|---|---|
duration |
Number |
1000 |
delay |
Number |
0 |
endDelay |
Number |
0 |
easing |
String |
"easeOutElastic(1, .5)" |
round |
Number |
0 |
direction |
String |
"normal" |
loop |
Number | Boolean |
false |