transtition 数字动态效果

<template>

  <div>

    <input v-model="num.current" type="number" step="20"/>

    <div>{{ num.tweenedNumber }}</div>

  </div>

  </template>

 

  <script setup lang='ts'>

  import { reactive, watch } from 'vue'

  import gsap from 'gsap'

  let num = reactive({

    current: 0,

    tweenedNumber: 0

  })

 

  watch(() => num.current, (newVal, oldVal) => {

    // 动态设置tweenedNumber的值,有动画效果

    gsap.to(num, {

      duration: 1,

      tweenedNumber: newVal

    })

  })

  </script>

 

  <style scoped lang='scss'>

 

  </style>