vue 2.0 图片轮播用transition-group做了个淡入淡出对部分图片没有效果

Question

用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呀。。。。唉还是不太明白

Answer 1

看看是不是z-index的问题