css3数字滚动特效简单实现

放在大屏里面的数字滚动特效的简单实现，
思路参考：https://blog.csdn.net/nidunlove/article/details/78257549
结合业务需求和自己的思考拿vue写了一遍，有些地方实现逻辑不一样，代码也简洁很多
效果图：

附上代码：

<template>
  <div class="box" :key="key">
    <div style="border: 1px yellow solid" class="block" v-for="list in listAll">
      <div v-bind:class="[roll, rollList[list.length]]">
        <div v-for="number in list">{{number}}</div>
      </div>
    </div>
  </div>
</template>

主要方法：

// 获得变化前字符串和变化后字符串,可从后台获取
      getNumber(){
        console.log(this.init);
        let random=Math.floor(Math.random() * (100000- 1) + 1);
        this.prev=this.addZero(this.init,10);
        this.next=this.addZero(this.init+random,10);
        this.init+=random;
      },

      // 对数字补零成字符串
      addZero(num, n) {
        let len = num.toString().length;
        while (len < n) {
          num = "0" + num;
          len++;
        }
        return num;
      },

// 对变化前后字符串的各字符变化过程进行填充处理
      getData() {
        this.listAll=[];
        let prevArray = this.prev.split("");
        let nextArray = this.next.split("");

        let listInit = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

        for(let i=0;i<prevArray.length;i++){
          let prevNumber = parseInt(prevArray[i]);
          let nextNumber = parseInt(nextArray[i]);
          let start = -1;
          let end = -1;

          for (let j = 0; j < listInit.length; j++) {
            if (listInit[j] === prevNumber) {
              start = j;
            }
            if (start !== -1 && listInit[j] === nextNumber) {
              end = j;
              break;
            }
          }
          this.listAll.push(listInit.slice(start, end + 1));
        }
      },

      run() {
        this.getNumber();
        this.key++;//强制组件刷新
      },

//定时任务刷新
      setTimer() {
        this.run();
        setInterval(() => {
          setTimeout(this.run, 0);
        }, 1000 * 4)
      },

<style scoped>
  .box {
    background: green;
    display: inline-flex;
    height: 100px
  }

  .block {
    height: 100px;
    width: 100px;
    color: white;
    text-align: center;
    overflow: hidden;
  }

  .roll div {
    font-size: 80px;
    line-height: 100px;
  }

  .roll_1 {
    -webkit-animation: roll_1 3s forwards; /* Safari 与 Chrome */
  }

  /*省略roll_2——roll_8*/

  .roll_9 {
    -webkit-animation: roll_9 3s forwards; /* Safari 与 Chrome */
  }

  @-webkit-keyframes roll_1 /* Safari 与 Chrome */
  {
    0% {
      transform: translate3d(0, 0px, 0);
    }
    100% {
      transform: translate3d(0, -100px, 0);
    }
  }

   /*省略roll_2——roll_8*/

  @-webkit-keyframes roll_9 /* Safari 与 Chrome */
  {
    0% {
      transform: translate3d(0, 0px, 0);
    }
    100% {
      transform: translate3d(0, -900px, 0);
    }
  }
</style>