参考

学习Vue3 第二十二章（transition-group过度列表）_小满zs的博客-CSDN博客

10 个功能强大的 JavaScript 动画库，打造引人入胜的用户体验 - 掘金 (juejin.cn)

使用 GSAP 在 Vue 中创建动画效果 - 掘金 (juejin.cn)

环境搭建

安装过渡动画库

npm i gsap

使用

<template>
    <div>
        <input step="20" v-model="num.current" type="number" />
        <div>{{ num.tweenedNumber.toFixed(0) }}</div>
    </div>
</template>
    
<script setup lang='ts'>
import { reactive, watch } from 'vue'
import gsap from 'gsap'
const num = reactive({
    tweenedNumber: 0,
    current:0
})
 
watch(()=>num.current, (newVal) => {
    gsap.to(num, {
        duration: 1,
        tweenedNumber: newVal
    })
})
 
</script>
    
<style>
</style>

效果演示