【vue3动画】基于侦听器的动画

今天没事翻Vue3文档的时候看见一个不错的动画效果，做个记录，以后可能会用到

Vue3文档–基于侦听器的动画效果

//代码
import { ref, reactive, watch } from 'vue'
import gsap from 'gsap'
const number = ref(0)
const tweened = reactive({
  number: 0
})
watch(number, (n) => {
  gsap.to(tweened, { duration: 0.5, number: Number(n) || 0 })
})

//模板
Type a number: <input v-model.number="number" />
<p>{{ tweened.number.toFixed(0) }}</p>