1.0.3 • Published 5 years ago
vuenime v1.0.3
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:
import Vue from 'vue';
import Vuenime from 'vuenime';
Vue.use(Vuenime);
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 |