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://v2.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/[email protected]/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.

If you want a vue 3 composition API component, based on @jeff's & @AnandShiva's answers. Here it is:

<template>{{ displayNumber }}</template>

<script setup>
const props = defineProps({
  value: {
    type: Number,
    default: 0,
  },
  speed: {
    // smaller is faster
    type: Number,
    default: 5,
  },
});

const displayNumber = ref(props.value);
let interval = null;

watch(
  () => props.value,
  (newVal) => {
    clearInterval(interval);

    if (newVal === displayNumber.value) {
      return;
    }

    interval = setInterval(() => {
      if (Math.floor(displayNumber.value) !== Math.floor(newVal)) {
        var change = (newVal - displayNumber.value) / props.speed;
        change = change >= 0 ? Math.ceil(change) : Math.floor(change);
        displayNumber.value = displayNumber.value + change;
      } else {
        displayNumber.value = newVal;
        clearInterval(interval);
      }
    }, 20);
  }
);
</script>

If you want support for the animation of floating-point numbers and negative numbers also this vue component will work. It's built on top of @jeff's answer. Change the number 5 or make it a prop to control how fast or slow the animation happens.

<template>
  <span>{{displayNumber}}</span>
</template>

<script>

export default {
  data () {
    return {
      displayNumber: 0,
      counter: false
    };
  },
  props: {
    number: {
      type: Number,
      default: 0
    }
  },
  watch: {
    number () {
      clearInterval(this.counter);
      if (this.number === this.displayNumber) {
        return;
      }
      this.counter = setInterval(function () {
        if (Math.floor(this.displayNumber) !== Math.floor(this.number)) {
          var change = (this.number - this.displayNumber) / 5;
          change = change >= 0 ? Math.ceil(change) : Math.floor(change);
          this.displayNumber = this.displayNumber + change;
        } else {
          this.displayNumber = this.number;
          clearInterval(this.counter);
        }
      }.bind(this), 20);
    }
  }
};
</script>

I improved [@AnandShiva's][1] Script it appears there were 3-4 edge cases which needed proper handling:

• The component properly handles decimal places based on the new value (Previously when transitioning from 0.33 to 0.3344 there could appear 0.033xxxxxxxxxxxx numbers now it is limited to 0.33xx - The new number digit count determines maximum allowed digits after zero)

• There is a need to disable animations in some cases so animate=true/false added

• Zero case was not handled, the component now ensures proper handling of zero

• Sometimes APIs provide string inputs also instead of floats or integers so component now also accepts strings

Usage:

<template>
  <div>
    <animated-number :value="currentNumber" :animate="true"></animated-number>
  </div>
</template>

<script>
import AnimatedNumber from './AnimatedNumber.vue';

export default {
  components: {
    AnimatedNumber
  },
  data() {
    return {
      currentNumber: 123.45
    };
  },
  mounted() {
    // Example of changing the number after 2 seconds
    setTimeout(() => {
      this.currentNumber = 678.90;
    }, 2000);
  }
};
</script>

And the component itself:

<template>
  <span>{{ formattedNumber }}</span>
</template>

<script>
export default {
  data() {
    return {
      displayNumber: 0,
      counter: null,
      maxDecimalPlaces: 0
    };
  },
  props: {
    value: {
      type: [Number, String],
      default: 0
    },
    animate: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    value() {
      const newValue = parseFloat(this.value) || 0; // Parse the value to a number, default to 0 if parsing fails
      this.maxDecimalPlaces = this.getDecimalPlaces(newValue);
      // console.log('maxDecimalPlaces', this.maxDecimalPlaces);
      // console.log('Number prop changed:', newValue);
      if (!this.animate) {
        this.displayNumber = newValue;
        return;
      }

      clearInterval(this.counter);
      if (newValue === this.displayNumber) {
        return;
      }
      this.counter = setInterval(() => {
        let change = (newValue - this.displayNumber) / 5;
        this.displayNumber += change;

        if (Math.abs(newValue - this.displayNumber) < Math.pow(10, -this.maxDecimalPlaces)) {
          this.displayNumber = newValue;
          clearInterval(this.counter);
        }
      }, 20);
    }
  },
  computed: {
    formattedNumber() {
      return this.formatNumber(this.displayNumber);
    }
  },
  methods: {
    getDecimalPlaces(number) {
      const parts = number.toString().split('.');
      return parts.length > 1 ? parts[1].length : 0;
    },
    formatNumber(number) {
      if (number === 0) return '0'; // Explicitly handle the case where the number is 0
      return number.toFixed(this.maxDecimalPlaces).replace(/\.?0+$/, '');
    }
  },
  mounted() {
    const initialValue = parseFloat(this.value) || 0; // Parse the initial value to a number, default to 0 if parsing fails
    this.maxDecimalPlaces = this.getDecimalPlaces(initialValue);
    this.displayNumber = initialValue;
    // console.log('Component mounted, initial displayNumber:', this.displayNumber);
  }
};
</script>