vue.js加入购物车小球动画

实现加入购物车小球动画的思路

• 在购物车组件Cart.vue中，添加小球代码

   
   
  在export default中定义小球数据
  data(){
   
   
          return{
              balls: [ //生成一个动画小球的div,并且生成五个小球,五个是为了生成一定数量的小球来作为操作使用,按照小球动画的速度,一般来说五个也可以保证有足够的小球数量来运行动画
                  {
                      show: false
                  },
                  {
                      show: false
                  },
                  {
                      show: false
                  },
                  {
                      show: false
                  },
                  {
                      show: false
                  }
              ],
              dropBalls: [], //dropBalls数组正在运行的小球
              fold: true
          }
          
   
   
  样式：
  .ball-container
   
   
  .ball
      position: fixed
      left: 32px
      bottom: 22px
      z-index: 200
      transition: all 0.4s cubic-bezier(0.49, -0.29, 0.75, 0.41)
      .inner
          width: 16px
          height: 16px
          border-radius: 50%
          background: rgb(0, 160, 220)
          transition: all 0.4s linear
  
   
   
   
    
  在向添加商品组件中Cartcontrol.vue中，向父组件Goods.vu组件中传递参数