[英]Transition in v-for with VueJS
I can't achieve a fade-in fade-out with an image displayed in v-for with VueJS. 使用VueJS在v-for中显示的图像无法实现淡入淡出。 I want to display image by image using next/prev button.
我想使用next / prev按钮按图像显示图像。
I read this in documentation : 我在文档中读到了这个:
Vue provides a transition wrapper component, allowing you to add entering/leaving transitions for any element or component in the following contexts:
Vue提供了一个转换包装器组件,允许您在以下上下文中为任何元素或组件添加进入/离开转换:
Conditional rendering (using v-if)
条件渲染(使用v-if)
Conditional display (using v-show)
条件显示(使用v-show)
Dynamic components
动态组件
Component root nodes
组件根节点
So I arrange my code to have a v-if in my v-for. 所以我安排我的代码在我的v-for中有一个v-if。
Here a piece of code : 这里有一段代码:
<transition name="fade">
<img id='pvw' v-for='day in days' :src='day.preview' v-if='day.current' title='Preview' />
</transition>
And a little bit of css : 还有一点点css:
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-active {
opacity: 0
}
Here is fiddle to see what I am trying to do. 这是小提琴,看看我想做什么。
Please help me to achieve this, not sure why it doesn't work. 请帮助我实现这一点,不知道为什么它不起作用。
You have to use TRANSITION GROUP , not TRANSITION. 你必须使用TRANSITION GROUP ,而不是TRANSITION。
I would suggest to use something like: https://github.com/asika32764/vue2-animate which is great package which allows you to use CSS animations from AnimateCSS in your Vue application. 我建议使用类似的东西: https : //github.com/asika32764/vue2-animate这是一个很棒的包,允许你在你的Vue应用程序中使用AnimateCSS的CSS动画。
For example, in your case you would use something like that: 例如,在您的情况下,您将使用类似的东西:
<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>
You're doing v-if="day.current"
so I doubt that's ever going false
long enough for Vue to recognize it to do the transition. 你正在做
v-if="day.current"
所以我怀疑它是否会长时间false
,以至于Vue无法识别它进行转换。 If you just add :key="day.preview"
to your image tag you'd be good to go. 如果您只是将
:key="day.preview"
添加到图片代码中,那么您就可以了。
https://jsfiddle.net/hfp78gfe/1/ https://jsfiddle.net/hfp78gfe/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.