title: Transition between images in vuejs
body: <p>I want to create a smooth transition between 2 images with a legend. The images come from an object-array of images.</p>
  <p>Because works only on single tags and components, I've created a component to define the image+legend.</p>
  <pre><code>&lt;transition&gt;
      &lt;home-image :slide=&quot;slide&quot; :key=&quot;slide&quot;&gt;&lt;/home-image&gt;
  &lt;/transition&gt;
  </code></pre>
  <p>The classes I define are like this</p>
  <pre><code>.v-enter-active,
  .v-leave-active {
      transition: opacity 2s ease-in-out;
  }
  
  .v-leave,
  .v-enter-to {
      opacity: 1;
  }
  
  .v-enter,
  .v-leave-to {
      opacity: 0;
  }
  </code></pre>
  <p>The new image is returned by a method</p>
  <pre><code>updateSlide() {
      this.slide = this.entries[ Math.floor( Math.random() * this.entries.length ) ];
  }
  </code></pre>
  <p>where entries is my array defined in data</p>
  <p>this.slide is updated in regular intervals, every 10seconds like this, which is defined in the created() section</p>
  <pre><code>this.updateSlide();
  this.uSlide = setInterval( this.updateSlide, 10000);
  </code></pre>
  <p>The code works, in the sense that a new image is loaded in this.slide every 10 seconds. However, the transitions work only &quot;half-way&quot;.</p>
  <p>There is no transition fading out: the &quot;old image&quot; disappears and makes way for the new image fading in.</p>
  <p>However, what I'd like is a smooth transition from one to the other.</p>
  <p>I've tried more than a couple of ideas including using mode=&quot;out-in&quot; and &quot;in-out&quot; but nothing works as I want.</p>
  <p>What am I overlooking?</p>