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

项目场景：

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

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

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

分析：

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

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

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

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

解决方案：

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

html 复制代码

<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>