解决 v-for 出来的元素 transition 过渡问题

文章目录

<transition name="carousel-fade">
    <div class="carousel-li"
        v-for="(item, index) in banners" :key="index"
        v-show="index === pageNumber">
        <a :href="item.sourceUrl">
            <img :src="item.imgUrl" alt="">
        </a>
    </div>
</transition>

.carousel-fade-enter-active, .carousel-fade-leave-active{
    transition: all 1.3s ease;
}
.carousel-fade-enter, .carousel-fade-leave-to{
    opacity: 0;
}

vue报错: [Vue warn]: can only be used on a single element. Use for lists.

解决办法：
v-show改为v-if,v-show:会渲染全部MOD并通过样式隐藏，v-if:不会渲染全部，只会渲染满足条件的MOD。

学习笔记，根据自己理解简单整理的，不对的地方望指正，非常感谢。