为什么transition-group只能部分有效果？

Question

<transition-group tag="div" name="group" class="item-group">
     <div class="item-box" v-for="(item,index) in couponList" :key="'item'+index"
                 @click="item.type==0?exchangeItem(item):null">
     </div>
</transition-group>

    .group-leave-active {
        transition: none;
    }

    .group-enter-active {
        transition: all 1s;
    }

    .group-enter, .group-leave-to {
        opacity: 0;
    }

希望得到的效果是删除item时直接消失，但是新增的时候是淡入的效果

如果我新增或者删除子项，完全没有问题
如果当我修改某一项的时候，淡入的效果是没有的，这里还能接受
但是如果原本couponList有3项，现在换成了另外不同5项的时候，希望得到的效果是3项消失，5项淡入，实际效果是3项直接改了硬生生地变化了，然后多余的两项有淡入效果。

请问这里该怎么写？

Answer 1

transition-group根据Key值决定是否进行状态变化，当key变化时会触发动画，否则vue会按照最小开销去修改对应的值而不触发过渡

Answer 2

:key="'item'+index" 不要用index，用id之类的