VUE3之Animation（二）

利用gsap实现数字渐变效果

<template>
  <div class="app">
    <input type="number" step="100" v-model="counter">
    <h2>当前计数：{{showNumber.toFixed(0)}}</h2>
  </div>
</template>

<script>
import gsap from 'gsap';
  export default {
    data() {
      return {
        counter:0,
        showNumber:0
      }
    },
    watch:{
      counter(newValue){
        gsap.to(this,{
          duration:1,
          showNumber:newValue
        })
      }
    }
  }
</script>

对数字进行观察，当数字发生变化时使用gsap的to方法，将要显示的数字变化在一个时期内变化到目标数字。