Transition in v-for with VueJS

Question

I can't achieve a fade-in fade-out with an image displayed in v-for with VueJS. I want to display image by image using next/prev button.

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:

• Conditional rendering (using v-if)

• Conditional display (using v-show)

• Dynamic components

• Component root nodes

So I arrange my code to have a v-if in my v-for.

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 :

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

Answer 1

You have to use TRANSITION GROUP, not 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.

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>

Answer 2

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. If you just add :key="day.preview" to your image tag you'd be good to go.

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