I'm looking to animate number changes using VueJs.
For example I have:
{{ number }}
Then number changes from 0 to 100, I would like the element to count up to 100 rather than just jumping stright to it.
How would I do this without using any 3rd party (pure Js/VueJs) excluding VueJs?
Got this working as a custom component: https://jsfiddle.net/5nobcLq0/5/
html
<body>
<input v-model="number">
<animated-number :number="number"></animated-number>
</body>
js
Vue.component('animated-number', {
template:"{{ displayNumber }}",
props: {'number': { default:0 }},
data () {
return {
displayNumber:0,
interval:false
}
},
ready () {
this.displayNumber = this.number ? this.number : 0;
},
watch: {
number () {
clearInterval(this.interval);
if(this.number == this.displayNumber) {
return;
}
this.interval = window.setInterval(() => {
if(this.displayNumber != this.number) {
var change = (this.number - this.displayNumber) / 10;
change = change >= 0 ? Math.ceil(change) : Math.floor(change);
this.displayNumber = this.displayNumber + change;
}
}, 20);
}
}
})
new Vue({
el:'body',
});
