title: Smoothly animate v-show in VueJS
body: <p>I was trying to animated two divs using transition in Vuejs. Below is the code (jsfiddle) that I've used. But don't know why it's not working</p>
  
  <p><a href="https://jsfiddle.net/k6grqLh1/16/" rel="noreferrer">https://jsfiddle.net/k6grqLh1/16/</a></p>
  
  <p>vue</p>
  
  <pre><code>&lt;div id="vue-instance"&gt;
    &lt;div&gt;
      &lt;transition name="fade"&gt;
        &lt;div v-show="show"&gt;
          &lt;div class="box yellow"&gt;&lt;/div&gt;
        &lt;/div&gt;
       &lt;/transition&gt;
       &lt;transition name="fade"&gt;
        &lt;div v-show="!show"&gt;
          &lt;div class="box blue"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;/transition&gt;
      &lt;a href="#" @click="show = !show"&gt;Change&lt;/a&gt;
    &lt;/div&gt;  
  &lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>.fade-enter-active, .fade-leave-active {
    transition: opacity .5s
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active in &lt;2.1.8 */ {
    opacity: 0
  }
  
  .box {
    width:200px;height:200px;
  }
  .yellow{
    background-color:yellow;
  }
  .blue{
    background-color:blue;
  }
  </code></pre>
  
  <p>js</p>
  
  <pre><code>var vm = new Vue({
    el: '#vue-instance',
    data: {
      show: true
    }
  });
  </code></pre>