css3數字滾動特效

一個格子：

效果：

代碼：

props：['value'],
data(){
	return {
		pretime: undefined,
	    numbers:[0,0,0,0,0,0],
	    numLenth:0,
	}
},
 created () {
    setTimeout(()=>{
      this.number = this.value
    },500)
  },
           

<template>
  <div class="chartNum">
    <div class="box-item">
        <li :class="['number-item', 'mark-item']">
          <span v-if="value">
            <i ref="numberItem" :style="{transform:`translate(-50%, -${number * 10}%)`}">0123456789</i>
          </span>
          <span class="comma" v-else>{{number}}</span>
        </li>
    </div>
  </div>
</template>
<style scoped lang='scss'>
    .box-item {
        position: relative;
        height:35px;
        font-size: 54px;
        line-height: 41px;
        text-align: center;
        list-style: none;
        color: rgb(255,255,0);
        writing-mode: vertical-lr;
        text-orientation: upright;
        /*文字禁止編輯*/
        -moz-user-select: none; /*火狐*/
        -webkit-user-select: none; /*webkit浏覽器*/
        -ms-user-select: none; /*IE10*/
        -khtml-user-select: none; /*早期浏覽器*/
        user-select: none;
        /* overflow: hidden; */
    }
    /*滾動數字設定*/
    .number-item {
        list-style: none;
        width: 35px;
        height: 35px;
        background-image: url('/static/img/image/數字框1.jpg');
        background-size:100% 100% ;
        margin-right: 3px;
        color: rgb(255,255,0);
        font-weight: bold;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 22px;
        & > span {
            position: relative;
            display: block;
            width: 100%;
            height: 100%;
            writing-mode: vertical-rl;
            text-orientation: upright;
            overflow: hidden;
            & > i {
                font-style: normal;
                position: absolute;
                top: 5px;
                left: 50%;
                transition:transform 2s ease-in-out;
                transform: translate(-50%,0);
                letter-spacing: 10px;
            }
        }
        .comma{
          text-align: center;
          padding-left: 5px;
        }
    }
    .number-item:last-child {
        margin-right: 0;
    }
</style>
           

多個格子：

效果：

每個格子裡的數字，如果大于0就會從0向上滾動到數字的位置

代碼：

//因為是元件
props：['value'],
data(){
	return {
		pretime: undefined,
	    numbers:[0,0,0,0,0,0],
	    numLenth:0,
	}
},
computed:{
	_value:{
    get(){
      let arr = []
      this.numLenth = String(this.value).length
      if(this.value){
        for(var i = 0 ;i<this.numLenth;i++){
          arr.push(String(this.value).substr(i,1))
        }
      }
      if(arr.length<6){
        let len = 6-arr.length
        for(var j = 0;j<len;j++){
          arr.unshift(0)
        }
      }else{
        arr = arr.splice(0,6)
      }
      return arr
    }
  }
}

created () {
    setTimeout(()=>{
      let Arr =  this._value
      for(var i=0;i<Arr.length;i++){
        this.numbers[i] = Arr[i]
      }
      this.numbers = this.numbers.concat([])
    },500)
  },
           

<template>
  <div class="chartNum">
    <div class="box-item">
        <li :class="['number-item', 'mark-item']" v-for="(number,index) in _value" :key="index">
          <span v-if="number">
            <i ref="numberItem" :style="{transform:`translate(-50%, -${numbers[index] * 10}%)`}">0123456789</i>
          </span>
          <span class="comma" v-else>{{number}}</span>
        </li>
    </div>
  </div>
</template>

<style scoped lang='scss'>
    .box-item {
        position: relative;
        height:33px;
        font-size: 54px;
        line-height: 41px;
        text-align: center;
        list-style: none;
        color: rgb(255,255,0);
        writing-mode: vertical-lr;
        text-orientation: upright;
        /*文字禁止編輯*/
        -moz-user-select: none; /*火狐*/
        -webkit-user-select: none; /*webkit浏覽器*/
        -ms-user-select: none; /*IE10*/
        -khtml-user-select: none; /*早期浏覽器*/
        user-select: none;
        /* overflow: hidden; */
    }
    /*滾動數字設定*/
    .number-item {
        list-style: none;
        width: 33px;
        height: 33px;
        background-image: url('/static/img/image/數字框1.jpg');
        background-size:100% 100% ;
        margin-right: 3px;
        color: rgb(255,255,0);
        font-weight: bold;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 22px;
        & > span {
            position: relative;
            display: inline-block;
            width: 100%;
            height: 100%;
            writing-mode: vertical-rl;
            text-orientation: upright;
            overflow: hidden;
            & > i {
                font-style: normal;
                position: absolute;
                top: 5px;
                left: 50%;
                transition:transform 1s ease-out;
                transform: translate(-50%,0);
                letter-spacing: 10px;
            }
        }
        .comma{
          padding-left: 7px;
          padding-top: 3px;
        }
    }
    .number-item:last-child {
        margin-right: 0;
    }
</style>