数字翻牌器效果

数字翻牌器

简单记录一下，最近做的VUE项目里，需要写一个数字翻牌器的效果。过程比较波折，嗯，或者说恶心。引以为戒吧。
先简单看一下这个最终效果。

之所以说这个东西搞得略显波折，是因为开始的时候，没有要做什么动画，是临近项目结束的时候，产品说：“搞个动画吧！”

版本1.0

所以就很仓促的搞了一个，当时的效果是这样的。

考虑到，可能有人需要这样的效果，我就先把这个版本的代码发上来。

<template>
    <div class="number-bord" :class="title == '外部客户累积量' ? 'bord-a' : 'bord-b'">
        <div class="number-box">
            <div class="number-item" v-for="(item, index) in numberStr" :key="index">
                <div class="scroll-out-box" v-if="item !== ','">
                    <div class="scroll-box" :class="'number-'+item">
                        <div class="font">0</div>
                        <div class="font">1</div>
                        <div class="font">2</div>
                        <div class="font">3</div>
                        <div class="font">4</div>
                        <div class="font">5</div>
                        <div class="font">6</div>
                        <div class="font">7</div>
                        <div class="font">8</div>
                        <div class="font">9</div>
                    </div>
                </div>

                <div class="comma" v-else>,</div>
            </div>
        </div>

        <div class="bord-title">{
  {title}}</div>
    </div>
</template>

<script>
    export default {
    name: "mainten",
        props: {
            title: {
                type: String
            },
            bordNumber: {
                type: Number,
                value: 0
            },
            setTime: {
                type: Boolean,
                value: false
            },
            isCreate: {
                type: Boolean,
                value: true
            }
        },
        data(){
            return{
                numberStr: [],
                timer: null,
                fetchNum: 0, // 记录前一个数据
                restTime: 0,
                isOrg: true
            }
        },
        watch: {
            bordNumber(newVal, oldVal) {
                if (!this.setTime) {
                    // ajax反应太慢，mounted执行可能与watch同步 
                    // 所以，设置该状态为初始化
                    this.fetchNum = oldVal
                    this.transNumber(newVal)
                } else {
                    // console.log('do loop')
                    this.transNumber(newVal)
                }
            },
            isCreate(newVal, oldVal) {
                this.isOrg = newVal
                // console.log(newVal, oldVal)
            }
        },
        mounted() {
            // 首屏加载时，不需要动画
            if (!this.setTime) this.transNumber(this.bordNumber)
        },
        methods:{
            transNumber( num ){
                let old