title: -enter-active and -leave-active classes doesn't appear while toggle-in Vue event
body: <p>For some reason it is impossible to make transition effect where the -enter-active and -leave-active  appears with a default timeout in de html code of my webpack/vue-loader application.</p>
  <p>I've copy/pasted the below code from the <a href="https://v2.vuejs.org/v2/guide/transitions.html" rel="nofollow noreferrer">vue-guide</a> in my webproject after dealing with some problems with a lack of animation. Even this simple example below isn't working at all.</p>
  <p>Does anyone else encounters this problem?</p>
  <p><strong>index.html</strong></p>
  <pre><code>  &lt;div id=&quot;demo&quot;&gt;
    &lt;button v-on:click=&quot;show = !show&quot;&gt;
      Toggle
    &lt;/button&gt;
    &lt;transition name=&quot;fade&quot;&gt;
      &lt;p v-if=&quot;show&quot;&gt;hello&lt;/p&gt;
    &lt;/transition&gt;
    &lt;/div&gt;
  </code></pre>
  <p><strong>My main.js file:</strong></p>
  <pre><code>new Vue({
    el: '#demo',
    data: {
      show: true
    }
  })
  </code></pre>
  <p>**I've resolved the above code by adding css class fade-enter-active, .fade-leave-active **</p>
  <p>However, the same principle does still not work in my image slider which I've created in a Vue.component. The code looks something like this.</p>
  <pre><code>var dataHome = { show: true,
                   currentNumber: 1,
                   images: ['image1.jpg',
                            'image2.jpg',
                            'image3.jpg',
                            'image4.jpg',
                            'image5.jpg']
                   }
  
  const Home = {
    template: `&lt;div class=&quot;box-container&quot;&gt;
                &lt;p&gt;&lt;a @click=&quot;prev&quot;&gt;Previous&lt;/a&gt; || &lt;a @click=&quot;next&quot;&gt;Next&lt;/a&gt;&lt;/p&gt;
                &lt;transition name=&quot;fade&quot;&gt;
                  &lt;div id=&quot;demo&quot; v-if=&quot;show&quot;&gt;
                    &lt;img :src=&quot;images[Math.abs(currentNumber) % images.length]&quot;/&gt;
                  &lt;/div&gt;
                &lt;/transition&gt;
              &lt;/div&gt;`,
    data: function () {
      return dataHome  //dataset with images
    },
    methods: {
      next: function () {
        this.currentNumber += 1;
        this.show = true;
      },
      prev: function () {
        this.currentNumber -= 1;
        this.show = true;
      }
    }
   }
  </code></pre>