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

yeachen
  • 1.5k

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

回复
阅读 12.5k
1 个回答
mguy
  • 3
新手上路,请多包涵

看看是不是z-index的问题

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏