CSS实现数字滚动变化

<template>
<div>
    <ul>
        <li
            :class="{'number-item': !isNaN(item) }"
            v-for="(item,index) in computeNumber"
            :key="index">
            <span v-if="!isNaN(item)">
              <i ref="numberItem">0123456789</i>
            </span>
            <span v-else>{{item}}</span>
        </li>
    </ul>
</div>
</template>

<script>
export default {
    name: 'index',
    props: {
        number: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            computeNumber: []
        }
    },
    mounted() {
        this.timer = setInterval(() => {
            setTimeout(this.increaseNumber, 0);
        }, 1000)
    },
    methods: {
        // 定时增长数字
        increaseNumber() {
            this.number = this.number + this.getRandomNumber(1, 100);
            this.number = this.number.toString();
            // 补0
            this.number = this.fixZeroStart(this.number, 8);
            // 转成数组形式
            this.computeNumber = this.formatStr(this.number);
            // 设置每一位数字的偏移
            this.setNumberTransform();
        },
        // 设置每一位数字的偏移
        setNumberTransform() {
            let numberItems = this.$refs.numberItem;
            let numberArr = this.computeNumber.filter(item => !isNaN(item));
            for (let index = 0; index < numberItems.length; index++) {
                let elem = numberItems[index];
                elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`;
            }
        },
	    // 给字符串补0
	    fixZeroStart(str, length) {
	        return (Array(length).join('0') + str).slice(-length);
	    },
	    // 字符串添加','并转换成数组
	    formatStr(str){
	        const len = str.length;
	        if (len <= 3) {
	            return str;
	        }
	        const r = len % 3;
	        const num = r > 0 ? str.slice(0, r) + ',' + str.slice(r, len).match(/\d{3}/g).join(',') : str.slice(r, len).match(/\d{3}/g).join(',');
	        return num.split('');
	    },
        getRandomNumber (min, max) {
            return Math.floor(Math.random() * (max - min + 1) + min)
        }
    },
    beforeDestroy() {
        clearInterval(this.timer);
        this.timer = null;
    }
}
</script>

<style lang="scss" scoped>
ul {
    font-size: 0.24rem;
    height: 0.28rem;
    display: flex;
    align-items: flex-end;
}
.number-item {
    width: 0.2rem;
    height: 100%;
    border-radius: 0.02rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.06rem;
    background-color: #427fff;
    & > span {
        position: relative;
        display: inline-block;
        width: 100%;
        height: 100%;
        writing-mode: vertical-rl;
        text-orientation: upright;
        overflow: hidden;
        & > i {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translate(-50%, 0);
            transition: transform 0.5s ease-in-out;
            letter-spacing: 0.1rem;
        }
    }
}
</style>

https://m.qy.cn/jszx/detail/8973.html