效果图:
实现代码
安装库:npm install --save-dev gsap
引入:import gsap from 'gsap'
<template>
<div>
<el-input v-model="num.currNum" type="number" step="20" style="width: 120px;"></el-input>
<div>
{{ num?.tweenNum.toFixed(0) }}
</div>
</div>
</template>
<script setup lang='ts'>
import { reactive,watch } from 'vue'
import gsap from 'gsap'
let num = reactive({
currNum:0,
tweenNum:0
})
watch(()=>num.currNum,(newVal)=>{
gsap.to(num,{
duration:1,
tweenNum:newVal
})
})
</script>
<style scoped lang='scss'>
</style>