安装: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>