vue2.0 购物车小球的实现

Posted 2020-10-02 小芹菜的琴

<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‘;
    }
  }
}