SOURCE

function tweenAmount (start, end, time, callback, finish) {
    const interval = 50;
    const step = (end - start) / (time / interval);
    const anim = () =>{
        setTimeout(()=>{
            start = parseInt(start+step); 
            if(start < end) {
                callback(start);
                anim();
            } else {
                callback(end);
                finish();
            }
        }, interval);
    }
    anim();
}

function init() {
    new Vue({
        computed: {
            amountFormat() {
                return String(this.amount).replace(/(?<=\d+)(\d{2})$/, '.$1');;
            }
        },
        data: {
            amount: 2688,
            fanpaiAnim: false,
        },
        methods: {
            addAmount() {
                if(this.addAmountFlag) {
                    return;
                }
                this.addAmountFlag = true;
                tweenAmount(this.amount, this.amount+7123, 500, (val)=>{
                    this.amount = val;
                }, ()=>{
                    this.addAmountFlag = false;
                    console.log('已结束');
                })
            },
            fanpai() {
                this.fanpaiAnim = !this.fanpaiAnim;
            }
        }
    }).$mount('#app') 
}

window.onload = init;

<div id="app">
    <div class="amount">金额：{{amountFormat}}</div>
    <button @click="addAmount">增加金额</button>

    <div class="fanpai">
        <div :class="'fanpai_pai ' + (fanpaiAnim?'anim':'')">
            <div class="fanpai_pai_f"></div>
            <div class="fanpai_pai_b"></div>
        </div>
        <div :class="'fanpai_pai ' + (fanpaiAnim?'anim':'')">
            <div class="fanpai_pai_f"></div>
            <div class="fanpai_pai_b"></div>
        </div>
        <div :class="'fanpai_pai ' + (fanpaiAnim?'anim':'')">
            <div class="fanpai_pai_f"></div>
            <div class="fanpai_pai_b"></div>
        </div>
    </div>

    <button @click="fanpai">播放翻牌动画</button>
</div>

.amount {
    color: brown;
    font-size: 24px;
}

.fanpai {
    display: flex;
    margin-top: 10px;
    overflow: hidden;
}

.fanpai_pai {
    position: relative;
    width: 108px;
    height: 148px;
    margin-right: 20px;
}

.fanpai_pai.anim .fanpai_pai_f {
    transform: rotateY(180deg);
}

.fanpai_pai.anim .fanpai_pai_b {
    transform: rotateY(0);
}

.fanpai_pai_f,.fanpai_pai_b {
    position: absolute;
    top: 0;
    left: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    // perspective: 1000px;
    //-webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    transition: ease-in-out 600ms;
}

.fanpai_pai_f {
    z-index: 2;
    background-image: linear-gradient(#f5d6d6,#fff);
    transform: rotateY(0deg);
}
.fanpai_pai_b {
    z-index: 1;
    background: #F9EBED;
    transform: rotateY(-180deg);
}