vue状态过度

安装：gsap

cnpm install gsap -D

代码

<template>
    <div>
        <input v-model="num.current" step="20" type="number">
        <div>
            {{ num.tweenedNumber.toFixed(2) }}
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, watch } from 'vue';
import gsap from 'gsap';

const num = reactive({
    current: 0,
    tweenedNumber: 0
})

watch(() => num.current, (newVal, oldVal) => {
    gsap.to(num, {
        duration: 1,
        tweenedNumber: newVal
    })
})
</script>

<style scoped>

</style>