Allows the components to tween their properties.
npm install @seregpie/vuetweenInstall the plugin globally.
import Vue from 'vue';
import VueTween from '@seregpie/vuetween';
Vue.use(VueTween);or
Register the plugin in the scope of a component.
import VueTween from '@seregpie/vuetween';
export default {
mixins: [VueTween],
/*...*/
};<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/@seregpie/vuetween"></script>If Vue is detected, the plugin will be installed automatically.
{
props: {
number: Number,
animationDuration: Number,
},
tweened: {
animatedNumber: {
get() {
return this.number;
},
duration() {
return this.animationDuration;
},
easing(t) {
return t * (2 - t);
},
},
},
}Use nested objects and arrays.
{
data: {
colors: [
{r: 255, g: 0, b: 0},
{r: 0, g: 255, b: 0},
{r: 0, g: 0, b: 255},
],
},
tweened: {
animatedColors: {
get() {
return this.colors;
},
duration: 1000,
},
},
}