我们将创建一个简单的 Vue 3 组件，允许用户输入一个数字，并且当数字变化时，显示的数字将平滑过渡到新的值。这种动画效果能吸引用户的注意力，使数据更新更生动。
<template>
<input v-model="number">
<span>{{tweened.number.toFixed(0)}}</span>
</template>
<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import gsap from 'gsap'
const number = ref(999)
const tweened = reactive({ number:0 })
watch(
number,
(n) => gsap.to(tweened,{duration:.5, number: Number(n) ?? 0})
)
</script>
