用vue做图片轮播。用transition-group设置了一个淡入淡出的效果,就是简单地改一下透明度。但是在图片切换的时候只有部分图片在切换的时候保留这种效果,其他图片还是很直白的直接隐藏显示。
下面是template里面的transition-group的代码
<transition-group name="fadeIn" tag="ul">
<div class="slide" v-for="(item,index) in banners" v-show="index === curpage" :key="'a'+index">
<a :href="item.sourceUrl" target="_blank">
<img :src="item.imgUrl" alt="">
</a>
</div>
</transition-group>
样式代码
.fadeIn-enter-active,.fadeIn-leave-active {
transition: all 1s ease;
}
.fadeIn-enter-active,.fadeIn-leave{
opacity: 1;
}
.fadeIn-enter,.fadeIn-leave-active {
opacity: 0;
}
大神们帮我看看问题在哪儿
更新:我把v-show改成v-if可以实现切换。但是这种频繁切换官方推荐是v-show呀。。。。唉还是不太明白
看看是不是z-index的问题