transition+gsap状态过度，数字动态效果

五分钱嘀Love

于 2023-04-29 00:00:00 发布

阅读量187

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/nickelLove/article/details/130389481

版权

该文章展示了如何在Vue3的TS环境中，结合GSAP库创建一个数字变化的过渡动画。通过监听数值的变化，使用GSAP的to方法更新动画状态，实现数字从旧值平滑过渡到新值的效果。同时，提到了安装GSAP后可能需要重启项目来解决报错问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看效果图：

实现代码：

<template>
    <div class="transi_sty">
        <input v-model="num.current" step="20" type="number">
        <div>{{ num.tweeNuber.toFixed(0) }}</div>
    </div>
</template>

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

const num = reactive({
    current: 0,
    tweeNuber: 0
})
//监听值的变化
watch(() => num.current, (newVal, oldVal) => {
    gsap.to(num, {
        tweeNuber: newVal
    })

})
</script>

<style lang="less" scoped>
.transi_sty {
    font-size: 30px;
}
</style>

备注：vue3+ts+gsap,

需安装gsap依赖：