vue实现饿了么商品购物页的抛物线小球动画效果

最终效果图

原理

• 需要三个组件，最下方蓝色购物的车shopCart子组件，每个加减号组成的购物小球子组件cartControl，和包含每个商品信息的goods父组件。

• 购车小球组件cartControl组件在点击加号时对外触发事件，将小球对象本身传递给父组件goods，再由goods组件作为桥梁将这个信息传递给另外一个子组件shopCart，shopCart组件获取到小球对象后，对该小球进行位置计算，从而实现不同商品位置添加商品的抛物线小球效果。

实现过程

1.cartcontrol.vue代码如下

• html部分代码

  <div class="cartcontrol">
    <transition name="fadeRotate">
      <div class="cart-decrease"
           v-show="food.count>0"
           @click.stop.prevent="decreaseCart($event)"
           transition="move">
        <span class="inner icon-remove_circle_outline"></span>
        <span class="inner"></span>
      </div>
    </transition>
    <div class="cart-count"
         v-show="food.count>0">{
  {food.count}}</div>
    <div class="cart-add icon-add_circle"
         @click.stop.prevent=