vue 实现购物车小球动画效果

html代码
<template>
  <div class="card-body">

    <!-- 商品卡片 -->
    <div class="goods-card">
      <div class="goods-img">
        <img :src="imgurl">
      </div>
      <div class="goods-title">{
  {title}}</div>
      <div class="goods-price">￥{
  {price}} </div>
      <!-- 加减商品span中的class使用的是iconfont -->
      <span v-show="show" class="iconfont icon-jian" :style="subStyle" @click="goodsSub"></span>
      <span class="goods-num" v-show="show">{
  {goodsNum}}</span>
      <span class="iconfont icon-tianjia1 add" @click="addGoods"></span>
    </div>


    <!-- 抛物线小球 -->
    <div class="cart">
      <div class="ball-wrapper" v-for="(ball, index) of balls" :key="index">
        <transition
          name="drop"
          @before-enter="beforeEnter"
          @enter="enter"
          @after-enter="afterEnter"
        >
          <div class="ball" v-show="ball.show">
            <!--这里为了做两个维度的动画，因此需要多包一层，外层做Y轴，内层做X轴动画-->
            <div class="inner inner-hook" :style="[{'background':bgcolor}]"></div>
          </div>