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>
相关推荐
JAVA学习通36 分钟前
JavaScript网页开发设计(轮播图)
javascript
逆袭的菜鸟X38 分钟前
RxJS 高阶映射操作符详解:map、mergeMap 和 switchMap
前端
bubiyoushang88840 分钟前
HTML5的新语义化标签
前端·html·html5
会飞的鱼先生1 小时前
vue3自定义指令来实现 v-copy 功能
前端·javascript·vue.js
Alice-YUE1 小时前
【CSS学习笔记1】css基础知识介绍
css·学习笔记
陈天伟教授1 小时前
Web前端开发 - 制作简单的焦点图效果
java·开发语言·前端·前端开发·visual studio
_殊途2 小时前
前端三件套之html详解
前端·html
不思念一个荒废的名字2 小时前
【黑马JavaWeb+AI知识梳理】后端Web基础03 - MySQL概述
前端·数据库·mysql
谢尔登3 小时前
【React Native】快速入门
javascript·react native·react.js
进取星辰3 小时前
32、跨平台咒语—— React Native初探
javascript·react native·react.js