Question

我无法通过v-for VueJS显示图像来实现淡入淡出。我想使用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
}

Here无法理解我想要做的事情。

请帮助我实现这一点，不确定它为什么不起作用。

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>

Answer 2

你正在做v-if="day.current"所以我怀疑，false是否已经足够长时间让Vue认出它来进行转换。如果您只是将:key="day.preview"添加到图片代码中，那么您就可以了。

https://jsfiddle.net/hfp78gfe/1/

使用VueJS进行v-for转换

2 个答案: