小球没有动画效果，瞬间移动到底部购物车的，没有进入before

shopcart.vue代码如下：

methods: {

drop (el) {

for (let i = 0; i < this.balls.length; i++) {

let ball = this.balls[i];

if (!ball.show) {

ball.show = true;

ball.el = el;

this.dropBalls.push(ball);

return;

}

}

}

},

transitions: {

drop: {

before (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;

let y = -(window.innerHeight - rect.top - 22);

el.style.display = '';

el.style.webkitTransform = `translate3d(0,${y}px,0)`;

el.style.transform = `translate3d(0,${y}px,0)`;

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) {

/* eslint-disable no-unused-vars */

let rf = el.offestHeight;

this.$nextTick(() => {

el.style.webkitTransform = 'translate3d(0,0,0)';

el.style.transform = 'translate3d(0,0,0)';

let inner = el.getElementsByClassName('inner-hook')[0];

inner.style.webkitTransform = 'translate3d(0,0,0)';

inner.style.transform = 'translate3d(0,0,0)';

});

},

afterEnter (el) {

let ball = this.dropBalls.shift();

if (ball) {

ball.show = false;

el.style.display = 'none';

}

}

}

}

cartcontrol.vue代码如下：

methods: {

addCart(event) {

if (!event._constructed) {

return;

};

if (!this.food.count) {

Vue.set(this.food, 'count', 1);

} else {

this.food.count++;

};

this.$dispatch('cart.add', event.target);

},

decreaseCart(event) {

if (!event._constructed) {

return;

};

if (this.food.count) {

this.food.count--;

};

}

}

goods.vue代码如下：

_drop(target) {

this.$refs.shopcart.drop(target);

},

events: {

'cart.add'(target) {

this._drop(target);

}

}