我无法通过VueJS在v-for中显示图像来实现淡入淡出.我想使用next/prev按钮逐个显示图像.
我在文件中读到:
Vue提供了一个转换包装组件,允许您在以下上下文中为任何元素或组件添加进入/离开转换:
条件渲染(使用v-if)
条件显示(使用v-show)
动态组件
组件根 node
所以我把我的代码安排成在我的v-for中有一个v-if.
下面是一段代码:
<transition name="fade">
<img id='pvw' v-for='day in days' :src='day.preview' v-if='day.current' title='Preview' />
</transition>
还有一点css:
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-active {
opacity: 0
}
Here是小提琴,看我想做什么.
请帮我实现这一点,不知道为什么它不起作用.