vue添加動畫效果的問題？

以下是購物車的結(jié)構(gòu)代碼

 <ul>
          <transition name="slide-fade">
          <li v-for = 'food in selectFoods' class="cartList" v-if  = "show">{{food.name}}
            <span @click = "addFood(food)" class="addFood">增加</span>
            <transition name="fade">
              <b v-if="food.count>0">{{food.count}}</b>
            </transition>
            <span @click = 'decreaseFood(food)' class="decreaseFood" v-show="food.count>0" v-on:click="show = !show">減少</span>
            <span>價格：￥{{food.count * food.price}}</span>
          </li>
</transition>
        </ul>

以下是 食物列表的代碼 addCart方法是添加到購物車?yán)锏姆椒?/p>

 <div class = "foods-wrapper">
      <div class="fooList" v-for="(item,index) in goods" >
        <div v-for="(food,foodIndex) in item.foods" v-show="name==item.name" class = 'food' :class="{'food-selected':foodIndex == activeIndex}" @click ="addCart(food,foodIndex)" >
          <img width="100%" height="100%" :src="food.icon" class="food-icon" />
          <span class = "food-name">{{food.name}}</span>
          <span class = 'food-price'>￥{{food.price}}</span>
        </div>
      </div>
    </div>

data() {
      return {
        goods: [],
        isSelected:0,
        cartList:[],
        name:'food',
        styles:'food',
        show:true,
        activeIndex:null

      }
    },

想給添加購物車添加一個動畫，把動畫效果添加在了遍歷出來的div上 ，但是點擊添加的時候 只有第一個li有動畫效果，再添加的時候 就報錯

請問應(yīng)該怎么修改 應(yīng)該把添加動畫的效果加載addCart應(yīng)該怎么寫

 addCart(food,index) {
     // this.cartList.push(food)
       // if(index == this.activeIndex){
       //        this.activeIndex = null
       //   }else{
       //        this.activeIndex = index
       //   }
       if (!food.count) {
        Vue.set(food, 'count', 0)
      }
      food.count ++

      console.log(food.name)
    },