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

<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项直接改了硬生生地变化了,然后多余的两项有淡入效果。

请问这里该怎么写?

阅读 807
评论
    2 个回答

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

      相似问题
      推荐文章