转型V-与VueJS

Question

我无法实现淡入淡出，在V-与VueJS显示的图像。我想用一个/上一个按钮，显示由图像图像。

我的文档阅读：

Vue公司提供了一个过渡的包装组件，允许您添加进入/离开转换为以下上下文中的任何元件或部件：

• 有条件的渲染（使用V-IF）
• 有条件的显示（使用v型显示）
• 动态组件
• 组件根节点

所以我安排我的代码有一个V型，如果在我的v型的。

这里一段代码：

<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

你必须使用过渡小组，没有过渡。

我会建议使用这样的：https://github.com/asika32764/vue2-animate这是很大的包，它允许你使用从AnimateCSS CSS动画在Vue公司的应用程序。

例如，你的情况，你会使用类似的东西：

<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/