用VueJS转换v-for

Question

使用VueJS在v-for中显示的图像无法实现淡入淡出.我想使用next/prev按钮按图像显示图像.

我在文档中读到了这个:

Vue提供了一个转换包装器组件,允许您在以下上下文中为任何元素或组件添加进入/离开转换:

• 条件渲染(使用v-if)

• 条件显示(使用v-show)

• 动态组件

• 组件根节点

所以我安排我的代码在我的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
}

这是小提琴,看看我想做什么.

请帮助我实现这一点,不知道为什么它不起作用.

Answer 1

你必须使用TRANSITION GROUP,而不是TRANSITION.

我建议使用类似的东西:https://github.com/asika32764/vue2-animate 这是一个很棒的包,它允许你在你的Vue应用程序中使用AnimateCSS的CSS动画.

例如,在您的情况下,您将使用类似的东西:

<transition-group name="fadeLeft" tag="div" >
    <img v-for="day in days" :src='day.preview'  v-bind:key="day" v-if='day.current' title='Preview'>  
</transition-group>