VueJs - Animate number changes
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',});
I realize this is an older post, but I was looking for something similar and I found an example straight from the vue.js 2.0 documentation. You can find it here: https://vuejs.org/v2/guide/transitioning-state.html#Organizing-Transitions-into-Components
I've recreated it in the snippet below.
// This complex tweening logic can now be reused between// any integers we may wish to animate in our application.// Components also offer a clean interface for configuring// more dynamic transitions and complex transition// strategies.Vue.component('animated-integer', { template: '<span>{{ tweeningValue }}</span>', props: { value: { type: Number, required: true } }, data: function() { return { tweeningValue: 0 } }, watch: { value: function(newValue, oldValue) { this.tween(oldValue, newValue) } }, mounted: function() { this.tween(0, this.value) }, methods: { tween: function(startValue, endValue) { var vm = this function animate() { if (TWEEN.update()) { requestAnimationFrame(animate) } } new TWEEN.Tween({ tweeningValue: startValue }) .to({ tweeningValue: endValue }, 500) .onUpdate(function() { vm.tweeningValue = this.tweeningValue.toFixed(0) }) .start() animate() } }})// All complexity has now been removed from the main Vue instance!new Vue({ el: '#example-8', data: { firstNumber: 20, secondNumber: 40 }, computed: { result: function() { return this.firstNumber + this.secondNumber } }})<script src="https://cdn.jsdelivr.net/npm/vue@2.4.3/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/tween.js"></script><div id="example-8"> <input v-model.number="firstNumber" type="number" step="20"> + <input v-model.number="secondNumber" type="number" step="20"> = {{ result }} <p> <animated-integer v-bind:value="firstNumber"></animated-integer> + <animated-integer v-bind:value="secondNumber"></animated-integer> = <animated-integer v-bind:value="result"></animated-integer> </p></div>I hope that helps!Tim
If you use GSAP
I took Jeff's answer and simplified it using GSAP.
import gsap from 'gsap';Vue.component('animate-integer', { template: '<span>{{displayValue}}</span>', props: { value: { default: 0 } }, data() { return { displayValue: this.value, tweenValue: this.value }; }, watch: { value() { gsap.to(this, { tweenValue: this.value, onUpdate: () => { this.displayValue = Math.ceil(this.tweenValue); } }); } }});Usage:
<input v-model="value"><animate-integer :value="value"></animated-integer>Update
As I've used this component it evolved to accept duration and formatting, here is a gist.