vue3数字上下滚动显示动效

原创

已于 2023-07-19 14:59:59 修改 · 795 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #vue #typescript

于 2023-07-19 14:58:57 首次发布

文章展示了如何使用Vue3的CompositionAPI和TypeScript创建一个名为NumberAnimation的组件，该组件能实现数字滚动的动效。组件接受`numm`（数字值）和`numLen`（显示位数）作为属性，还支持可选属性`noneDivide`来控制是否显示分隔符。通过处理数字字符串，动态设置元素的transform属性来达到动画效果。

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

实现动效如下:

2023-07-19 11.10.26.gif

2023-07-19 11.10.53.gif

代码具体如下:

vue3+ts+setup 封装组件

第一步封装组件 `NumberAnimation.vue`

  <template>
    <div class="number-digital">
        <div class="box-item">
            <li :class="{ 'number-item': !isNaN(item), 'mark-item': isNaN(item) }"
                :style="{ marginRight: needDivideMgright(index) }" v-for="(item, index) in orderNum" :key="index">
                <span v-if="!isNaN(item)">
                    <i :id="`numberItem${index}`">0123456789</i>
                </span>
                <div v-if="needDivideDot(index)