vue实现购物车抛物线小球动画效果的方法详解-创新互联

本文实例讲述了vue实现购物车抛物线小球动画效果的方法。分享给大家供大家参考，具体如下：

先上最终效果图，在商品页面和商品详情页面点击加号添加商品时都可以看到小球抛物线落入购物车的动画效果

此文章只写了商品页面购物小球的实现，商品详情页原理类似

实现步骤：

1. 需要三个组件，最下方包含蓝色购物车的【购物车】组件shopCart.vue（子组件），每个【加减号】组成的购物小球组件cartControl.vue（子组件），和包含每个商品信息的goods组件goods.vue（父组件）

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

3. cartControl.vue部分代码

html代码

  
  
  

   
  
  
  
  
{{food.count}}
  
  
