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>
相关推荐
2301_8161696114 分钟前
初学Vue之记事本案例
前端·javascript·vue.js
宁酱醇30 分钟前
CSS常用属性_(进阶)
前端·css
巴巴_羊35 分钟前
React useCallback函数
前端·react.js·前端框架
渔舟唱晚@1 小时前
React Native 从零开始完整教程(环境配置 → 国内镜像加速 → 运行项目)
javascript·react native·react.js
观测云1 小时前
端到端观测分析:从前端负载均衡到后端服务
运维·前端·负载均衡
kooboo china.2 小时前
Tailwind CSS实战技巧:从核心类到高效开发
前端·javascript·css·编辑器·html
卓怡学长2 小时前
w317汽车维修预约服务系统设计与实现
java·前端·spring boot·spring·汽车
lilye663 小时前
精益数据分析(38/126):SaaS模式的流失率计算优化与定价策略案例
前端·人工智能·数据分析
5:003 小时前
Qt:(创建项目)
java·前端·qt
green_pine_3 小时前
CSS学习笔记12——CSS3新增特性
前端·css·笔记·学习