vue2.0 购物车小球的实现

<div class="ballContain">  <div v-for="ball in balls">    <transition name="drop" @before-enter="beforeDrop" @enter="dropping" @after-enter="afterDrop" >      <div class="ball" v-show="ball.show">        <div class="inner inner-hook"></div>      </div>    </transition>  </div></div>

methods:{      drop: function (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;            }        }  },  beforeDrop: function(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)‘;      }    }  },  dropping: function(el, done) {    /* eslint-disadle no-unused-vars */    let refresh = el.offsetHeight;    this.$nextTick(() => {      el.style.webkitTransform = ‘translate3d(0,0,0)‘;      el.style.transform = ‘translate3d(0,0,0)‘;      let inner = el.getElementsByClassName(‘inner-hook‘)[0];      console.log(inner);      inner.style.webkitTransform = ‘translate3d(0,0,0)‘;      inner.style.transform = ‘translate3d(0,0,0)‘;      el.addEventListener(‘transitionend‘, done);    });  },  afterDrop: function(el) {    let ball = this.dropBalls.shift();    if (ball) {        console.log(el);      ball.show = false;      el.style.display = ‘none‘;    }  }}