Vue 删除列表项的淡出动画

使用vue前端框架尝试做一个购物车页面，勾选进购物车的商品列表可删除，代码如下：

**<template>部分**
<div class="goods-list-wrap">
  <transition-group name="list-complete">
    <div class="J-shoping-list" v-for="(item, index) in goodsList" :key="index">
      <img :src="item.img" />
      <div class="J-shoping-list-a">
        <p>{{item.price}}</p>
        <p>
        	<span class='goods-list-num'>{{item.num}}</span>
        	<span class='goods-list-price'>$ {{item.num * parseInt(item.price) || 0}}</span>
        </p>
      </div>
      <i class="el-icon-close goods-del-icon" @click="removeItem(item,index)"></i>
    </div>
  </transition-group>
</div>

**<script>部分**
data:function(){
	return {
		goodsList:[
	        {name: "apple", price: "5.00", num: "2", img: "/static/test/1.jpg"},
	        {name: "pear", price: "3.00", num: "1", img: "/static/test/2.jpg"},
	        {name: "grape", price: "7.90", num: "5", img: "/static/test/3.jpg"},
	        {name: "lemon", price: "2.50", num: "3", img: "/static/test/4.jpg"},
	        {name: "banan", price: "1.90", num: "7", img: "/static/test/5.jpg"},
	        {name: "cherry", price: "8.89", num: "2", img: "/static/test/6.jpeg"},
      ]
	}
},
methods:{
	removeItem(ele,idx) {
      this.goodsList.splice(idx, 1);
    },
}

**<style>部分（节选）**
.J-shoping-list {
  transition: all 1s;
}
.list-complete-enter, .list-complete-leave-to{
  opacity: 0;
  transform: translateY(30px);
}
.list-complete-leave-active {
  position: absolute;
}

代码部分完成之后，测试过程中出现了如下问题：

动画效果是有了，但是不管删除哪一项，动画都作用在最后一个列表项。
通过查阅资料，发现问题出在循环生成列表项时绑定的key值上，因为key是vue框架用来标识节点唯一性的，当使用index作为key值时，执行删除操作，删除之后的新数组index从1-6变为了1-5，此时，虚拟DOM认为列表项的最后一项需要应用动画效果。所以，改为选用其他属性作为key值，如name（本例中的name属性值无重复）。
<div class="J-shoping-list" v-for="(item, index) in goodsList" :key="index">
改为

<div class="J-shoping-list" v-for="(item, index) in goodsList" :key="item.name">

修改之后的动画效果为：

成功～撒花(^_)∠※