今天没事翻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>