點選新增按鈕時有一個小球掉落到購物車的特效，第一次點選時動畫特效沒有出來，且沒有進入afterEnter方法。後面點選都沒有問題。

效果如圖：（第一次點選）

但是我在enter方法裡面下了一個斷點之後就有動畫效果，且進入了afterEnter。效果如下：

希望大神幫我看看！非常感謝！

程式碼如下：

 <div class="ball-container">
            <div v-for="(ball, index) in balls" :key="index">
                <transition name="drop" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
                    <div v-show="ball.show" class="ball">
                        <div class="inner inner-hook"></div>
                    </div>
                </transition>
            </div>
        </div>
 

data() {
        return {
            balls: [
                {
                    show: false
                },
                {
                    show: false
                },
                {
                    show: false
                },
                {
                    show: false
                },
                {
                    show: false
                }
            ],
            dropBalls: []
        };
    }
 

methods: {
        drop(el) {  //觸發一次事件就會將所有小球進行遍歷 
            for (let i = 0; i < this.balls.length; i++) {
                let ball = this.balls[i];
                if (ball.show === false) {
                    ball.show = true;
                    ball.el = el;  //設定小球的el屬性為一個dom物件  
                    this.dropBalls.push(ball);  
                    return;   //此處return終結函式,這意味著每次觸發事件,dropBalls內只增加一個ball
                }
            }
        },
        beforeEnter(el) {
            let count = this.balls.length;
            while (count--) {
                let ball = this.balls[count];
                if (ball.show) {    
                    let rect = ball.el.getBoundingClientRect(); //獲取元素的位置
                    let x = rect.left - 32; //小球掉落X軸起點
                    let y = -(window.innerHeight - rect.top - 22); //小球掉落Y軸起點,向下為負
                    el.style.display = '';
                    el.style.webkitTransform = `translate3d(0, ${y}px,0)`; /* Safari 和 Chrome */
                    el.style.transform = `translate3d(0, ${y}px,0)`; //旋轉div元素
                    // 處理內層動畫
                    let inner = el.getElementsByClassName("inner-hook")[0];
                    inner.style.webkitTransform = `translate3d(${x}px, 0, 0)`;
                    inner.style.transform = `translate3d(${x}px,0,0)`;
                }
            }
        },
        enter(el, done) {
           //關閉ESlint語法監測，因為ES6語言規範會讓被申明卻未被呼叫的變數報錯
            /* eslint-disable no-unused-vars */
            let rf = el.offestHeight; //申明rf是為了觸發瀏覽器的重排
            this.$nextTick(() => {
                //修改資料之後立即使用這個方法，獲取更新後的 DOM。
                el.style.webkitTransform = 'translate3d(0, 0, 0)'; /* Safari 和 Chrome */
                el.style.transform = 'translate3d(0, 0, 0)'; //旋轉div元素
                let inner = el.getElementsByClassName('inner-hook')[0];
                inner.style.webkitTransform = 'translate3d(0, 0, 0)';
                inner.style.transform = 'translate3d(0, 0, 0)';
                el.addEventListener('transitionend', done)   //Vue為了知道過渡的完成，否則無法進入到afterEnter中  
            });
        },
        afterEnter(el) {
            let ball = this.dropBalls.shift(); //把陣列的第一個元素從其中刪除，並返回第一個元素的值。
            if (ball) {
                ball.show = false;
                el.style.display = 'none'; //隱藏小球
            }
        }
    }
 

 .ball-container {
        .ball {
            position: fixed;
            left: 32px;
            bottom: 22px;
            z-index: 200;
            transition: all 0.4s cubic-bezier(0.49,-0.29,0.75, 0.14); //貝塞爾曲線
            .inner {
                width: 16px;
                height: 16px;
                border-radius: 50%;
                background: rgb(0, 160, 220);
                transition: all 0.4s linear
            }
        }
    }

程式碼複製可用！