js实现数字滚动效果

<template>
    <div class="box-itemG" :class="{'change': change}">
        <li :class="{'number-itemG': !isNaN(item), 'mark-item': isNaN(item) }"
                  v-for="(item,index) in orderNum"
                  :key="index">
          <span v-if="!isNaN(item)">
            <i class="numberI" ref="numberItem">0123456789</i>
          </span>
          <span class="comma" v-else>{{item}}</span>
        </li>
    </div>
</template>

<script>

export default {
  name: "index",
  props:{
    order: {
      type: Number,
      default:0
    },
  },
  watch:{
    order:{
      handler(n,o){
        if (n != o) {
          this.change = true
          let strArr = n.toString()
          this.orderNum = JSON.parse(JSON.stringify(strArr.split("")))
          this.$nextTick(() => {
            this.setNumberTransform() 
          })
          setTimeout(() => {
            this.change = false
          }, 200)
        }
      },
      immediate:true
    },
  },
  data(){
    return {
      orderNum: [], // 要滚动的值
      change: false
    }
  },
  methods:{
    // 设置文字滚动
    setNumberTransform () {
      const numberItems = this.$refs.numberItem // 拿到数字的ref，计算元素数量
      const numberArr = this.orderNum.filter(item => !isNaN(item))
      // 结合CSS 对数字字符进行滚动,显示订单数量
      for (let index = 0; index < numberItems.length; index++) {
        const elem = numberItems[index]
        elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`
      }
    },
  },
  mounted() {
    this.setNumberTransform();
  }
}
</script>

<style scoped lang='scss'>
 /*订单总量滚动数字设置*/
.box-itemG {
   position: relative;
  //  height: 18px;
   font-size: 14px ;
   line-height: 14px;
   text-align: center;
   list-style: none;
   color: #333;
   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;
   margin: auto;
  //  left: 50%;
}
.change {
  background-color: #fec6c6;
}
/*滚动数字设置*/
.number-itemG {
  width: 7px;
  height: 14px;
  list-style: none;
  margin-right: 0;
  background:rgba(216, 187, 187,0);
  border-radius:0px;
//    border:0px solid rgba(221, 221, 221, 0);
  & > span {
    position: relative;
    display: block;
  //  margin-right: 10px;
    width: 100%;
    height: 100%;
    writing-mode: vertical-rl;
    text-orientation: upright;
    overflow: hidden;
    text-align: center;
    & > i {
      width: 16px;
      font-style: normal;
      position: absolute;
      top: 0;
      left: 30%;
      transform: translate(-50%,0);
      transition: transform 1s ease-in-out;
      letter-spacing: 10px;
      font-size: 1.3vh !important;
      }
    }
}
</style>