Digital scrolling increases effect

Effect demonstration

Video demo

Logical thinking

      For example, the final number we want to show is 5878390 , Then the first number is from 1 Scroll to 5 stop it , The second number is from 0 Scroll to 5 Scroll to 8 stop it , The third number is from 0 Scroll to 8 Scroll to 7 stop it （9 And then 0）, That is to say, each bit from left to right scrolls longer than the previous one , In this way, the number appears in turn from left to right .

Code implementation

Generate the array we need

For each digit, we need to generate the corresponding array .

this.num = '5878390'.split('');
let numArr = [];

this.num.map((item,index) => {
    numArr[index] = [];
    let i = 0;
    
    //  If it's not the first cycle , Add the last generated array 
    if(index != 0){
        numArr[index] = numArr[index].concat(numArr[index - 1]);
        //  Assign the last value of the array to  i 
        i = numArr[index1].pop(); 
    }

    while(i != item){
        numArr[index].push(i);
        i++;
        //  The remainder here is for  i  be equal to  10  Reset to  0
        i = i % 10;
    }
    
    // Because the judgment is  i  It's not equal to  item,  So finally we put item Add in 
    numArr[index].push(item);
})

this.numArr = numArr;

  The resulting array should look like this

 html Code

         In the code   numArr[indexNum].length - 1 and   index == 0 ? 0 : 33   It's all about  transform: translateY(-100%); Show the content correctly , What you don't understand here can be debugged in the browser css I understand. .

<div class="nums">
	<div v-for="(itemNum, indexNum) in num" :key="indexNum">
        //  Here, different animation times are set by the current subscript , Set the height according to the array length of the current number ,
		<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 Code  

.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%);
	}
}