vueJS中v-for的转换

我无法用vueJ中v-for显示的图像实现淡入淡出。我想使用next/prev按钮来显示图像。vueJS中v-for的转换

我的文档阅读：

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

条件渲染（使用v-if）

有条件显示（使用v-show）

个
动态组件

组件根节点

所以我安排我的代码有一个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是小提琴，看什么，我试图做的。

请帮我实现这一点，不知道为什么它不起作用。

来源

2017-01-03 chles

您必须使用TRANSITION GROUP，而不是TRANSITION。

我会建议使用类似于：https://github.com/asika32764/vue2-animate 这是一个很棒的包，它允许您在Vue应用程序中使用AnimateCSS中的CSS动画。

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

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

来源

2017-01-03 13:30:41

THX，我更新我做了什么和它的作品，但发现有图像的属性放置img元素，而不是。我已经使用过渡组，但我忘记了：看起来很重要的关键。 Thx为您的快速答案！ – chles

你做v-if="day.current"所以我怀疑是有史以来要去false足够长的Vue公司承认它做过渡。如果你只是添加:key="day.preview"到你的图片标签，你会很好去。

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

来源

2017-01-03 13:36:32

'：key =“day”'是比较诚实的好方法 –

为什么？当“天”发生什么变化时，这不会引发过渡吗？带代码的 –

几乎总是更好。 –

vueJS中v-for的转换

回答

相关问题