2 17.数字滚动动画实现

• 安装

 npm i gsap

• 封装组件

src/components/CounTo.vue

<template>
    {{ d.num.toFixed(2) }}
</template>


<script setup>
import { reactive,watch } from 'vue';
import gsap from 'gsap'


const props = defineProps({
    value: {
        type:Number,
        default: 0
    }
})

const d = reactive({
    num: 0
})


function AnimateToValue(){
    gsap.to(d, {
        duration: 0.5,
        num: props.value
    })
}

AnimateToValue()

watch(()=>props.value, ()=>AnimateToValue())

</script>

• 调用

<span class="text-3xl font-bold text-gray-500">
                        <!-- {{ item.value }} -->
                        <CountTo :value="item.value"/>
                    </span>




import CountTo from '~/components/CountTo.vue';