当前位置:网站首页>数字滚动增加效果
数字滚动增加效果
2022-07-06 18:51:00 【晓_枫】
效果演示
视频演示
逻辑思路
例如我们最终要展示的数字为 5878390 ,那么第一个数字就是从1滚动到5停止,第二个数字是从0滚动到5再滚动到8停止,第三个数字是从0滚动到8再滚动到7停止(9之后是0),也就是说从左到右每一位都比前面一位滚动的时间更长,这样就出现了从左到右数字依次出现的效果。
代码实现
生成我们所需的数组
对每一位数字我们都要生成对应的数组。
this.num = '5878390'.split('');
let numArr = [];
this.num.map((item,index) => {
numArr[index] = [];
let i = 0;
// 如果不是第一次循环,要把上一次产生的数组也加进来
if(index != 0){
numArr[index] = numArr[index].concat(numArr[index - 1]);
// 取数组的最后一个赋值给 i
i = numArr[index1].pop();
}
while(i != item){
numArr[index].push(i);
i++;
// 这里取余是为了在 i 等于 10 的时候重置为 0
i = i % 10;
}
//由于判断的是 i 不等于 item, 所以最后我们把item加进来
numArr[index].push(item);
})
this.numArr = numArr;
最后生成的数组应该是这样的
html代码
代码中 numArr[indexNum].length - 1和 index == 0 ? 0 : 33 都是为了在 transform: translateY(-100%); 时正确的展示内容,这里不懂的可以在浏览器中调试css就理解了。
<div class="nums">
<div v-for="(itemNum, indexNum) in num" :key="indexNum">
// 这里通过当前下标设置不同的动画时间,根据当前数字的数组长度来设置高度,
<div
:style="{ height: numArr[indexNum].length - 1 + '00%', animationDuration: indexNum / 10 + 0.5 + 's' }">
<div v-for="(item, index) in numArr[indexNum]" :key="index"
:style="{ height: index == 0 ? 0 : 33 + 'px' }">
{
{ item }}
</div>
</div>
</div>
</div>
css代码
.nums {
font-size: 26px;
font-weight: bold;
color: #FFFFFF;
line-height: 33px;
letter-spacing: 1px;
text-shadow: 0px 1px 6px #159AFF;
display: flex;
>div {
height: 33px;
overflow: hidden;
display: flex;
>div {
display: flex;
flex-direction: column-reverse;
animation: numIncrease 1s linear 1.3s;
animation-fill-mode: forwards;
transform: translateY(-100%);
>div {
height: 33px;
text-align: right;
}
}
}
}
@keyframes numIncrease {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(0%);
}
}
边栏推荐
- STM32 project -- Topic sharing (part)
- 6-6漏洞利用-SSH安全防御
- How to build a 32core raspberry pie cluster from 0 to 1
- 软件测试——Jmeter接口测试之常用断言
- [unity] upgraded version · Excel data analysis, automatically create corresponding C classes, automatically create scriptableobject generation classes, and automatically serialize asset files
- Detailed explanation of line segment tree (including tested code implementation)
- Halcon实例转OpenCvSharp(C# OpenCV)实现--瓶口缺陷检测(附源码)
- Use of pgpool II and pgpooladmin
- 所谓的消费互联网仅仅只是做行业信息的撮合和对接,并不改变产业本身
- CSDN 夏令营课程 项目分析
猜你喜欢
Web3对法律的需求
This week's hot open source project!
人脸识别应用解析
postgresql之整體查詢大致過程
[server data recovery] data recovery case of a Dell server crash caused by raid damage
Application analysis of face recognition
Detailed explanation of line segment tree (including tested code implementation)
15million employees are easy to manage, and the cloud native database gaussdb makes HR office more efficient
leetcode:5. 最长回文子串【dp + 抓着超时的尾巴】
Lidar: introduction and usage of ouster OS
随机推荐
A new path for enterprise mid Platform Construction -- low code platform
C#/VB.NET 删除Word文檔中的水印
Introduction to the internal structure of the data directory of PostgreSQL
ODBC database connection of MFC windows programming [147] (with source code)
leetcode:5. Longest palindrome substring [DP + holding the tail of timeout]
FLIR blackfly s usb3 industrial camera: how to use counters and timers
安全交付工程师
【Unity】升级版·Excel数据解析,自动创建对应C#类,自动创建ScriptableObject生成类,自动序列化Asset文件
3 -- Xintang nuc980 kernel supports JFFS2, JFFS2 file system production, kernel mount JFFS2, uboot network port settings, and uboot supports TFTP
C # / vb. Net supprime le filigrane d'un document word
This week's hot open source project!
Zhang Ping'an: accelerate cloud digital innovation and jointly build an industrial smart ecosystem
Several classes and functions that must be clarified when using Ceres to slam
Processus général de requête pour PostgreSQL
Big guys gather | nextarch foundation cloud development meetup is coming!
The mega version model of dall-e MINI has been released and is open for download
STM32项目 -- 选题分享(部分)
B站6月榜单丨飞瓜数据UP主成长排行榜(哔哩哔哩平台)发布!
Collection recommandée!! Quel plug - in de gestion d'état flutter est le plus fort? Regardez le classement des manons de l'île, s'il vous plaît!
leetcode:736. LISP syntax parsing [flowery + stack + status enumaotu + slots]