title: add transition effect in vue on backgroundImage
body: <p>I've been searching for a couple of days to add a fade transition effect on the backgroundImage that I'm changing through a Vue app.</p>
  <p>Here is the code snippet I've been testing on:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>new Vue({
    el: "#main",
    data: {
      images: [
        "https://images.freeimages.com/images/large-previews/bfd/clouds-1371838.jpg",
        "https://images.freeimages.com/images/large-previews/ffa/water-lilly-1368676.jpg",
        "https://images.freeimages.com/images/large-previews/efb/lotus-flower-1382251.jpg"
      ],
      current: 0,
      show: false
    },
    methods: {
      changeBG: function () {
        if (this.current &lt; this.images.length - 1) {
          this.current = this.current + 1;
        } else {
          this.current = 0;
        }
      }
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.main {
    height: 800px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    z-index: 0;
    background-repeat: no-repeat;
    background-size: cover;   
    background-position: center 0px; 
  } 
  button {
    width: 200px;
    height: 25px;
    margin: 10px; 
  }
  p.hello{
    color: white;
    margin: 10px;
    font-size: 50px;
  }
  
  .fade-enter-active,
  .fade-leave-active {
    transition: all 2s linear;
  }
  
  .fade-enter-to,
  .fade-leave {
    opacity: 0;
  }
  
  .fade-enter,
  .fade-leave-to {
    opacity: 1;
  }
  
  /* hello example transition */
  .slide-fade-enter-active {
    transition: all 1s ease;
  }
  .slide-fade-leave-active {
    transition: all 1s cubic-bezier(1, 0.5, 0.8, 1);
  }
  .slide-fade-enter,
  .slide-fade-leave-to {
    transform: translateX(10px);
    opacity: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;&lt;/script&gt;
  &lt;transition name="fade"&gt;
    &lt;div v-if="changeBG" class="main" id="main" :style="{ backgroundImage: 'url(\'' + images[current] + '\')' }"&gt;
      &lt;button v-on:click="changeBG"&gt;
        changeBG
      &lt;/button&gt;
      &lt;div id="testFromGuide"&gt;
        &lt;button @click="show = !show"&gt;
          toggleHello
        &lt;/button&gt;
        &lt;transition name="slide-fade"&gt;
          &lt;p class="hello" v-if="show"&gt;all your base are belong to us&lt;/p&gt;
        &lt;/transition&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/transition&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>My first question if this is simply possible? The reason I'm using backgroundImage is because the website I'm using this on has a background that is most easy to handle responsively through this (always covering, no repeat and keeping it center). And my scond question would be, if not, is there a possibility to make it work with a background set as described <a href="https://css-tricks.com/perfect-full-page-background-image/" rel="nofollow noreferrer">here</a>?</p>
  <p>In the codepen I've added an example of the <a href="https://v2.vuejs.org/v2/guide/transitions.html" rel="nofollow noreferrer">vue guide</a> to make sure it works and nothing is else is wrong. And the example works perfectly. Can't seem to find the answer for my example but I've been beginning to suspect it is simply not possible or I can't seem to find why vue isn't detecting something is changing.</p>