CODEWITHSUNDEEP
javascriptvue.js
chles
chles

Reputation: 185

Transition in v-for with VueJS

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.

Upvotes: 13

Views: 25844

Answers (2)

Marek Urbanowicz
Marek Urbanowicz

Reputation: 13644

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>

Upvotes: 20

Bill Criswell
Bill Criswell

Reputation: 32921

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/

Upvotes: 1

Related Questions