这是一个vue3 + scss的数字滚动效果

介绍:

        当数字变化时,只改变变化的数字位,其余的不变,可以递增、递减、骤变、负数也可以,但是样式要根据具体的项目需求去改;

效果1、增加数字:

效果2、减少数字:

使用方法:

<template><AnimatNumber :data="data" />
</template><script setup>
// 引入动画
import AnimatNumber from "./components/AnimatNumber.vue";const data = ref(0);setInterval(() => {data.value -= 30;
}, 2000);
</script><style lang="scss"></style>

组件代码(vue3):

<template><div class="num-wrap"><div v-for="(item, index) in computedData" :key="index" class="num-item"><div class="num-inner" ref="numInnerRef"><div class="prev">{{ item.newValue }}</div><div class="current">{{ item.oldValue }}</div><div class="next">{{ item.oldValue }}</div></div></div></div>
</template><script setup>
// 数字滚动效果
import { onBeforeUnmount, watch, ref, nextTick } from "vue";const props = defineProps({// 传进来的数据  number、string的number都可以data: {type: [Number, String],default: 999},// 动画持续时间  number、string的number都可以  最低1000msduration: {type: [Number, String],default: 500},// 基本的高度 所有的动画移动距离都是和这个有关的,确保这个值和css的$height一样,否则有问题baseHeight: {type: Number,default: 50}
});const numInnerRef = ref();// raf演示器
const setTimeoutPolyfill = (func, delay) => {let startTime = Date.now();let rafId;function animationFrameCallback() {const currentTime = Date.now();const timeElapsed = currentTime - startTime;if (timeElapsed >= delay) {func();} else {rafId = requestAnimationFrame(animationFrameCallback);}}rafId = requestAnimationFrame(animationFrameCallback);// 返回一个取消函数return () => cancelAnimationFrame(rafId);
};/*
推演公式新          旧1001  ->   10001002  ->   10011003  ->   10021004  ->   10031005  ->   1004
*/const newArr = ref([]);
const oldArr = ref([]);
const computedData = ref(props.data.toString().split("").map((item, index) => ({ index, oldValue: item, newValue: item }))
);
const lock = ref(false);
// 延时器
const timer = ref({timerOne: null,timerTwo: null
});watch(() => props.data,(newVal, oldVal) => {if (`${newVal}`.length !== `${oldVal}`.length) {lock.value = false;}if (!lock.value) {computedData.value = props.data.toString().split("").map((item, index) => ({ index, oldValue: item, newValue: item }));lock.value = true;}newArr.value = newVal.toString().split("").map((item, index) => ({ index, value: item }));oldArr.value = oldVal.toString().split("").map((item, index) => ({ index, value: item }));/*如果newArr的长度大于于oldArr的长度,则需要给oldArr从前面增加newArr.length - oldArr.length的长度的{ index, oldValue: '-', newValue: newValueItem }, 同时更新oldArr没有新增的index*/// 新值和老值差const differLength = newArr.value.length - oldArr.value.length;if (newArr.value.length > oldArr.value.length) {for (let i = 0; i < differLength; i++) {oldArr.value.unshift({ index: i, value: "-" });}// 重新设置indexoldArr.value.forEach((item, index) => (item.index = index));}// 改变的数字的索引集合const indexArr = [];newArr.value.forEach(item => {if (item.value !== oldArr.value[item.index].value) {indexArr.push(item.index);}});nextTick(() => {indexArr.forEach(diffIndex => {numInnerRef.value[diffIndex].children[0].innerHTML =newArr.value[diffIndex].value;numInnerRef.value[diffIndex].children[0].animate([{ top: `${-props.baseHeight}px` }, { top: 0 }],{duration: props.duration,fill: "forwards"});numInnerRef.value[diffIndex].children[1].animate([{ top: "0" }, { top: `${props.baseHeight}px` }],{duration: props.duration,fill: "forwards"});timer.value.timerOne = setTimeoutPolyfill(() => {numInnerRef.value[diffIndex].children[2].innerHTML =oldArr.value[diffIndex].value;timer.value.timerTwo = setTimeoutPolyfill(() => {numInnerRef.value[diffIndex].children[1].innerHTML =newArr.value[diffIndex].value;}, props.duration);numInnerRef.value[diffIndex].children[2].style.top = `${-props.baseHeight}px`;}, props.duration);});});},{ deep: true }
);// 卸载
onBeforeUnmount(() => {timer.value.timerOne && timer.value.timerOne();timer.value.timerTwo && timer.value.timerTwo();
});
</script><style lang="scss" scoped>
$width: 50px;
$height: 50px;
.num-wrap {margin-top: 200px;display: flex;gap: 10px;.num-item {width: $width;height: $height;border: 1px solid #000;border-radius: 8px;font-size: 20px;font-weight: 600;position: relative;overflow: hidden;color: #0dfbff;background: rgba(0, 13, 23, 0.5);.num-inner {position: relative;width: $width;height: $height;}.prev,.current,.next {width: $width;height: $height;text-align: center;line-height: $width;position: absolute;}.prev {top: -$height;}.current {top: 0;}.next {top: $height;}}
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/62911.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

TortoiseGit的下载、安装和配置

一、TortoiseGit的简介 tortoiseGit是一个开放的git版本控制系统的源客户端&#xff0c;支持Winxp/vista/win7.该软件功能和git一样 不同的是&#xff1a;git是命令行操作模式&#xff0c;tortoiseGit界面化操作模式&#xff0c;不用记git相关命令就可以直接操作&#xff0c;读…

最新版Chrome浏览器加载ActiveX控件之Adobe PDF阅读器控件

背景 Adobe PDF阅读器控件是一个ActiveX控件&#xff0c;用于在Windows平台上显示和操作PDF文件。它提供了一系列方法和属性&#xff0c;可以实现对PDF文件的加载、显示、搜索、打印、保存等操作。 allWebPlugin中间件是一款为用户提供安全、可靠、便捷的浏览器插件服务的中间件…

linux在没网的情况下如何校验时间 超详细拿来即用

一、没有校时服务器的话 1、手动修改 sudo date --set"2024-06-17 13:44:00"二、有校时服务器的话 1、手动校时 ntpdate 14.193.73.22、自动校时 写一个校时服务脚本 14.193.73.2 是校验时间服务器 #!/bin/sh while true dontpdate 14.193.73.2sleep 5;hwclock…

源码分析之Openlayers中的控件篇Control基类介绍

概述 Openlayers 中内置了9类控件&#xff0c;这9类控件都是基于Control类&#xff0c;而Control类则是继承于BaseObject类&#xff0c;如下图所示&#xff1a; 如上&#xff0c;这9类控件分别是&#xff1a; Attribution&#xff1a;属性控件FullScreen:全屏控件MousePositi…

计算机网络知识点全梳理(二.HTTP知识点总结)

目录 HTTP基本概念 HTTP优缺点 HTTP优点&#xff08;1.1&#xff09; HTTP缺点 HTTP与HTTPS HTTP 与 HTTPS 的区别 HTTPS 解决 HTTP 的哪些安全问题&#xff1f; HTTPS 如何解决安全问题&#xff1f; HTTPS 连接建立的过程&#xff1a; HTTP/1.1、HTTP/2、HTTP/3 演…

第P2周:Pytorch实现CIFAR10彩色图片识别

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 目标 实现CIFAR-10的彩色图片识别实现比P1周更复杂一点的CNN网络 具体实现 &#xff08;一&#xff09;环境 语言环境&#xff1a;Python 3.10 编 译 器: …

Quant connect的优势和不足,学习曲线难

Quant connect的优势和不足 Quant connect作为一个成熟的算法交易平台&#xff0c;具有许多优势&#xff0c;包括&#xff1a; 强大的回测功能&#xff1a;Quant connect提供了丰富的数据源和回测功能&#xff0c;可以对各种交易策略进行全面的回测和分析。 容易上手&#xf…

深入理解 Ansible Playbook:组件与实战

目录 1 playbook介绍 2 YAML语言 2.1语法简介 2.2数据类型 3 Playbook核心组件 3.1 hosts组件 3.2 remote_user组件 3.3 task列表和action组件 3.4 handlers 3.5 tags组件 3.6 其他组件说明 1 playbook介绍 playbook 剧本是由一个或多个"play"组成的列表。…

2024年食堂采购系统源码技术趋势:如何开发智能的供应链管理APP

本篇文章&#xff0c;小编将与大家一同探讨2024年食堂采购系统的技术趋势&#xff0c;并提供开发更智能的供应链管理APP的策略。 一、2024年食堂采购系统的技术趋势 1.人工智能与机器学习的深度应用 在2024年&#xff0c;AI和机器学习在食堂采购系统中的应用将更加普遍。这些…

代码随想录-算法训练营-番外(图论01:图论理论基础,所有可到达的路径)

day01 图论part01 今日任务:图论理论基础/所有可到达的路径 代码随想录图论视频部分还没更新 https://programmercarl.com/kamacoder/图论理论基础.html#图的基本概念 day01 所有可达路径 邻接矩阵 import java.util.Scanner;import java.util.List;import java.util.ArrayL…

系统架构的演变

什么是系统架构&#xff1f; 系统架构是系统的一种整体的高层次的结构表示&#xff0c;它确定了系统的基本组织、组件之间的关系、组件与环境的关系&#xff0c;以及指导其设计和发展的原则。随着技术的发展和业务需求的增长&#xff0c;系统架构经历了从简单到复杂、从集中到…

c++总复习

C 中多态性在实际项目中的应用场景 图形绘制系统 描述&#xff1a;在一个图形绘制软件中&#xff0c;可能有多种图形&#xff0c;如圆形、矩形、三角形等。这些图形都有一个共同的操作&#xff0c;比如绘制&#xff08;draw&#xff09;。通过多态性&#xff0c;可以定义一个基…

pip离线安装一个github仓库

要使用pip安装一个本地Git仓库&#xff0c;你可以按照以下步骤操作&#xff1a; 确保你已经克隆了Git仓库到本地。 进入仓库所在的目录。 使用pip安装。 以下是具体的命令&#xff1a; 克隆Git仓库到本地&#xff08;替换下面的URL为你的仓库URL&#xff09; git clone https…

【从零开始入门unity游戏开发之——C#篇04】栈(Stack)和堆(Heap),值类型和引用类型,以及特殊的引用类型string

文章目录 知识回顾一、栈&#xff08;Stack&#xff09;和堆&#xff08;Heap&#xff09;1、什么是栈和堆2、为什么要分栈和堆3、栈和堆的区别栈堆 4、总结 二、值类型和引用类型1、那么值类型和引用类型到底有什么区别呢&#xff1f;值类型引用类型 2、总结 三、特殊的引用类…

【C语言实现:用队列模拟栈与用栈模拟队列(LeetCode 225 232)】

LeetCode刷题记录 &#x1f310; 我的博客主页&#xff1a;iiiiiankor&#x1f3af; 如果你觉得我的内容对你有帮助&#xff0c;不妨点个赞&#x1f44d;、留个评论✍&#xff0c;或者收藏⭐&#xff0c;让我们一起进步&#xff01;&#x1f4dd; 专栏系列&#xff1a;LeetCode…

【Python】Selenium 爬虫的使用技巧和案例

引言 Selenium 是 Python 中功能强大的自动化测试工具,因其能够操控浏览器进行模拟操作,被广泛应用于网页数据爬取。相比传统的 requests 等库,Selenium 能更好地应对动态加载内容和复杂交互场景。本文将详细介绍 Selenium 爬虫的使用技巧,并提供实际案例来帮助读者快速上…

MySQL SQL语句性能优化

MySQL SQL语句性能优化指南 一、查询设计优化1. 避免 SELECT *2. 使用 WHERE 进行条件过滤3. 避免在索引列上使用函数和表达式4. 使用 LIMIT 限制返回行数5. 避免使用子查询6. 优化 JOIN 操作7. 避免全表扫描 二、索引优化1. 使用合适的索引2. 覆盖索引3. 索引选择性4. 多列索引…

Mybatis动态sql执行过程

动态SQL的执行原理主要涉及到在运行时根据条件动态地生成SQL语句&#xff0c;然后将其发送给数据库执行。以下是动态SQL执行原理的详细解释&#xff1a; 一、接收参数 动态SQL首先会根据用户的输入或系统的条件接收参数。这些参数可以是查询条件、更新数据等&#xff0c;它们…

java jar包加密 jar-protect

介绍 java 本身是开放性极强的语言,代码也容易被反编译,没有语言层面的一些常规保护机制,jar包很容易被反编译和破解。 受classfinal&#xff08;已停止维护&#xff09;设计启发,针对springboot日常项目开发,重新编写安全可靠的jar包加壳加密技术,用于保护软件版权。 使用说…

Linux:Git

Git常见指令&#xff1a; git help xx_command git xx_command --help git --version 查看git版本git config --global user.name "xxx_name" 全局级别的签名设置&#xff0c;全局的放在本用 git config --global user.ema…