Rendering Lists in VueJs

Animation

by Murat Kezli

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
<div class="vue-instance">
  <div>
    <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>
    <a href="#" @click="show = !show">Change</a>
  </div>
</div>
<div class="vue-instance">
    <a href="#" @click="show = !show">Change</a>
</div>

CSS

.fade-enter-active,
.fade-leave-active {
  transition: opacity 1s
}

.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
  }
});