利用Vue实现数字翻滚动画效果展示

<div style="display: inline-block;">
  <div v-for="(item,index) in strArr" :key="index"
       :class="item===','?'txt':'num'"
       :style="{backgroundColor: item===','?'':background, color:item===','?color:'#fff'}">
    <transition name="flip-number" mode="out-in">
      <span :key="item" class="number">{{ item }}</span>
    </transition>
  </div>
</div>

export default {
  props: {
    data: { type: String | Number, default: ''},
    background: { type: String, default: '#0f447a'},
    color: { type: String, default: '#239AFF'},
    time: { type: Number, default: 2000 }
  },
  data() {
    return {
      myData: '',
      strArr: [],
      interval: null
    }
  },
  created() {
    this.myData = this.data;
    this.updateStrArr(this.myData);
    this.interval = setInterval(() => {
      this.updateData();
    }, this.time);
  },
  beforeDestroy() {
    clearInterval(this.interval);
  },
  methods: {
    updateData() {
      this.myData++;
      this.updateStrArr(this.myData);
    },
    updateStrArr(data) {
      function padArrayWithZeros(array, minLength = 7) {
        while (array.length < minLength) {
          array.unshift(0);
        }
        return array;
      }
      const str = Number(data).toLocaleString();
      const arr = str.split('');
      this.strArr = padArrayWithZeros(arr);
    }
  }
}

.flip-number-enter-active, .flip-number-leave-active {
  transition: transform 0.1s, opacity 0.1s;
}
.flip-number-enter, .flip-number-leave-to {
  transform: rotateX(90deg);
  opacity: 0;
}