当前位置：首页 > news >正文

css 数字从0开始增加的动画效果

news 来源：原创 2025/5/1 5:28:14

项目场景：

提示：这里简述项目相关背景：

在有些时候比如在做C端项目的时候，页面一般需要一些炫酷效果，比如数字会从小值自动加到数据返回的值

css 数字从0开始增加的动画效果

分析：

提示：这里填写问题的分析：

可以使用自定义属性，让自定义属性的值自动从小值一直自动加到与后端返回的值一样大，

这里需要注意一点，需要在节点挂载完成后才可以，不然，给节点加属性的时候找不到哪个节点，

另外也要拿到后端返回的值，因为自动加到的值与后端返回的一样才行，

解决方案：

提示：这里填写该问题的具体解决方案：

<template><div ref="observerElement" class="observed-element flexEv bannerBg padTB100 padLR65 colorW"><div class="flex" v-for="item in props.bannerInfo"><div class="borderR paddingR20 flexC"><i :class="item.icon" class="iconfont fontS40 fontW4 colorW hoverS"></i></div><div class="paddingL20"><div ref="numRef" class="fontS26 fontW6 marginB10 number inLb":data-target="item.textTop"></div> <div class="fontS26 fontW6 inLb">+</div><div class="fontS18 fontW5">{{item.textBottom}}</div></div></div></div>
</template><script lang="ts" setup>
import {reactive,toRefs,ref,Ref,PropType,onMounted,onBeforeUnmount,
} from "vue"
const props=defineProps({// bannerInfo:{type:Array},
})
// 自动将数值加到会后那个值的方法
const changeNum=()=>{// 获取元素const numbers = document.querySelectorAll('.number')console.log("",numbers)// 获取所有的dom,querySelectorAll为为数组numbers.forEach(item => {item.textContent = "0";const upDateNumber = () => {// 获取每个类名为number的data-target,即获取最大值 const target = Number(item.getAttribute('data-target'))// 获取当前div的数值const d = Number(item.textContent)// 设置数据增加的值，可以通过target除的数值确定怎么加数值的快慢const increment = target / 100// 当数字小于最大值时，执行下面的操作if (d < target) {// 向上取整item.textContent = `${Math.ceil(d + increment)}`// 1ms重新调用，不然它会在第一次运行完就结束setTimeout(upDateNumber, 1000)} else {item.textContent = target+"";//textContent的值是 字符串 所以加个空字符}}upDateNumber()})
}
// 在节点挂载完成后 再执行
onMounted(()=>{console.log()changeNum()
})onBeforeUnmount(()=>{console.log()
})
const emit =defineEmits([""
])</script><style lang="less" scoped>
.bannerBg{background-color:#1d7b51 ;
}
.borderR{border-right: 1px solid #ffffff;
}
</style>