vue实现购物车动画

一、让各组件逻辑能够串联起来

1、cartControl.vue

(1)定义添加的点击事件

<div class="cart-add icon-arrow_lift" @click="addCart($event)"></div>

(2)在addCart中添加如下代码

addCart(event) {
  if (!event._constructed) {
    return;
  }
  if (!this.food.count) {
    Vue.set(this.food, 'count', 1);
  } else {
    this.food.count++;
  }
  this.$emit('add', event.target);
}

2、goods.vue

(1)在父组件中引入cartControl组件

<cartcontrol :food="food" @add="_drop"></cartcontrol>

(2)定义_drop方法，并调用子组件中的方法

_drop(target) {
  this.$nextTick(() => {
    this.$refs.shopcart.drop(target);
  });
}

(3)在引用子组件时添加rel属性

<shopcart ref="shopcart" :select-foods="selectFoods" :delivery-price="seller.deliveryPrice" :min-price="seller.minPrice"></shopcart>

3、shopcart.vue

在该组件中定义方法drop

drop(el) {
   console.log(el);
}

二、实现添加购物车时的抛物线动画（shopcart.vue）

1、html代码

<div class="ball-contain">
  <div v-for="(ball,index) in balls" :key="index">
    <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>

2、js代码

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) {
        ball.show = true;
        ball.el = el;
        this.dropBalls.push(ball);
        return;
      }
    }
  },
  beforeDrop(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(el, done) {
    /* eslint-disable no-unused-vars */
    let rf = 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];
      inner.style.webkitTransform = 'translate3d(0,0,0)';
      inner.style.transform = 'translate3d(0,0,0)';
      el.addEventListener('transitionend', done);
    });
  },
  afterDrop(el) {
    let ball = this.dropBalls.shift();
    if (ball) {
      ball.show = false;
      el.style.display = 'none';
    }
  }
},

3、style样式

.ball{
    position: fixed;
    left: 32px;
    bottom: 22px;
    z-index: 200;
    transition: all 0.4s cubic-bezier(0.49, -0.29, 0.75, 0.41);
  }
 .fold-enter-active,.fold-leave-active {
   transition: all 0.5s;
 }
.fold-enter,.fold-leave-active {
  transform: translate3d(0, 0, 0);
}
  .inner{
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgb(0, 160, 220);
    transition: all 0.4s linear;
  }