Rendering Lists in VueJs

Animation

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="vue-instance">
  <div>
    <transition name="fade">
      <div v-if="show">
        <div class="box yellow"></div>
      </div>
     </transition>
     <transition name="fade">
      <div v-if="!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;
}

JavaScript

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