vue gsap 动态数字效果

最新推荐文章于 2025-07-01 10:45:47 发布

原创最新推荐文章于 2025-07-01 10:45:47 发布 · 703 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js

vue 专栏收录该内容

10 篇文章

订阅专栏

这篇博客介绍了一个使用Vue编写的数字翻转组件。组件通过监听父组件传递的属性`totalHj`，在值变化时更新显示的数字，并借助GSAP库实现了数字从旧值平滑过渡到新值的动画效果。内容涵盖了Vue的props通信、数据绑定、计算属性以及自定义方法等知识点。

在这里插入图片描述

父组件

<DigitalFlopVue  :total-hj="digitalShow"/>


let digitalShow=ref(15488)
//下拉框切换 生成随机数展示
function changeXsq(value){
  console.log(value)
  digitalShow.value=Math.floor(Math.random()*30000)
}

组件DigitalFlop.vue

<template>
    <!-- <div>{{ animatedNumber }}</div> -->
    <div style="display: flex;justify-content: space-between;">
        <div class="ball" v-for="(item,index) in list" :key="index">
            <span style="font-size: 5vh;line-height: 5.5vh;font-weight: bold;">{{ item }}</span>
        </div>
    </div>
</template>
<script lang="ts">
import gsap from "gsap";
export default {
    props: ['totalHj'],
    data() {
        return {
            number: 0,
            tweenedNumber: 0,
            list: [],
            temp: 0
        }
    },
    computed: {
        animatedNumber: function () {
            return this.tweenedNumber.toFixed(0)
        }
    },
    methods: {
        changeNumber() {
            gsap.to(this.$data, {
                duration: 0.5, tweenedNumber: this.totalHj, onUpdate: () => {
                    this.list = this.tweenedNumber.toFixed(0).toString().split('');
                }
            });

        }
    },
    created() {
       this.changeNumber()
    },
    watch: {
        totalHj: function (newData, oldData) {
            this.changeNumber();
        },
    }
}
</script>
<style lang="scss" scoped>
.ball {
    height: 5.5vh;
    width: 4vh;
    border-radius: 1vh;
    background-color: #1d48c1;
    border: 1px solid;
    margin-right: 2vh;
}
</style>