Smoothly animate v-show in VueJS

Question

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

https://jsfiddle.net/k6grqLh1/16/

vue

<div id="vue-instance">
  <div>
    <transition name="fade">
      <div v-show="show">
        <div class="box yellow"></div>
      </div>
     </transition>
     <transition name="fade">
      <div v-show="!show">
        <div class="box blue"></div>
      </div>
      </transition>
    <a href="#" @click="show = !show">Change</a>
  </div>  
</div>

css

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0
}

.box {
  width:200px;height:200px;
}
.yellow{
  background-color:yellow;
}
.blue{
  background-color:blue;
}

js

var vm = new Vue({
  el: '#vue-instance',
  data: {
    show: true
  }
});

Answer 1

You have to add key in each of the div, besides adding vue 2.x in the fiddle, You need to make following changes:

Why from docs

When toggling between elements that have the same tag name, you must tell Vue that they are distinct elements by giving them unique key attributes. Otherwise, Vue’s compiler will only replace the content of the element for efficiency. Even when technically unnecessary though, it’s considered good practice to always key multiple items within a component.

HTML

<transition name="fade">
  <div key="3" v-if="show">
    <div class="box yellow"></div>
  </div>
</transition>
<transition name="fade">
  <div key="1" v-if="!show">
    <div class="box blue"></div>
  </div>
</transition>

Working fiddle: https://jsfiddle.net/k6grqLh1/21/

Edited

To make it more smooth, you can use Transition-Modes: mode="out-in", which will make the current element transitions out first, then when complete, the new element transitions in. see below code:

<transition name="fade" mode="out-in">
  <div key="3" v-if="show">
    <div class="box yellow"></div>
  </div>
  <div key="1" v-if="!show">
    <div class="box blue"></div>
  </div>
</transition>

Fiddle: https://jsfiddle.net/k6grqLh1/22/

Answer 2

I would definitely suggest to use: https://github.com/asika32764/vue2-animate

Great lib with AnimateCSS ported to VueJS transitions. I am using that with every project and it works perfectly.

To use it with v-show with single element:

<transition name="fade" >
    <p v-if="show">hello</p>
</transition>

Answer 3

First of all.. you are importing Vue 1. If you import Vue 2 this html works

<div id="vue-instance">
  <div>
    <transition name="fade">
      <div v-if="show" key="yellow">
        <div class="box yellow"></div>
      </div>
      <div v-if="!show" key="blue">
        <div class="box blue"></div>
      </div>
    </transition>
    <a href="#" @click="show = !show">Change</a>
  </div>  
</div>

Then you should read the docs https://vuejs.org/v2/guide/transitions.html#Transitioning-Between-Elements if you want to see how transitions between elements are handled