title: Transition in v-for with VueJS
body: <p>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.</p>
  
  <p>I read this in documentation :</p>
  
  <blockquote>
    <p>Vue provides a transition wrapper component, allowing you to add entering/leaving transitions for any element or component in the following contexts:</p>
    
    <ul>
    <li><p>Conditional rendering (using v-if)</p></li>
    <li><p>Conditional display (using v-show)</p></li>
    <li><p>Dynamic components</p></li>
    <li><p>Component root nodes</p></li>
    </ul>
  </blockquote>
  
  <p>So I arrange my code to have a v-if in my v-for.</p>
  
  <p>Here a piece of code :</p>
  
  <pre><code>&lt;transition name="fade"&gt;
     &lt;img id='pvw' v-for='day in days' :src='day.preview' v-if='day.current' title='Preview' /&gt;
  &lt;/transition&gt;
  </code></pre>
  
  <p>And a little bit of css :</p>
  
  <pre><code>.fade-enter-active, .fade-leave-active {
    transition: opacity .5s
  }
  .fade-enter, .fade-leave-active {
    opacity: 0
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/hfp78gfe/" rel="noreferrer">Here</a> is fiddle to see what I am trying to do.</p>
  
  <p>Please help me to achieve this, not sure why it doesn't work.</p>