title: Vue 2 Transition not working
body: <p>I have no idea where my code went wrong. It should be a simple transition. When I click the button the message shows correctly, but just that the there is no fade transition happening at all.</p>
  
  
  
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
      &lt;div&gt;
          &lt;transition name="fade"&gt;
              &lt;message v-show="showMessage" class="tr pop-up-message"&gt;
                  &lt;p slot="header"&gt;This is Header&lt;/p&gt;
                  &lt;span slot="body"&gt;This is Body&lt;/span&gt;
              &lt;/message&gt;
          &lt;/transition&gt;
  
          &lt;div v-if="!showMessage" class="block" @click.prevent="showMessage = true"&gt;
              &lt;a class="button is-primary"&gt;Primary&lt;/a&gt;
          &lt;/div&gt;
          &lt;div v-else-if="showMessage" class="block" @click.prevent="showMessage = false"&gt;
              &lt;a class="button is-primary"&gt;Primary&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      import message from './Message.vue'
      export default {
          components:{
              'message': message,
          }, 
          data(){
              return{
                  showMessage: false
              }
          },
      }
  &lt;/script&gt;
  </code></pre>