SOURCE

var app = new Vue({
  el: '#app',
  data() {
    return {
      myArray: [{id:1, name: 'aa'}],
      myArray2: [],
      show: true
    }
  }, 
  methods: {

  }
});

<div id="app">
 <button @click="show = !show">
    Toggle render
</button>
<transition name="fade">
  <p v-bind:key="show">
    {{ show ? 'hello' : 'hi' }}
  </p>
</transition>
</div>
1.相同元素没有key,动画会失效。
2.用key代替v-if/v-else

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}