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.