SOURCE

new Vue({
  el: '#app',
  data: {
    show: true,
    hidden: true,
    docState: 'edited'
  },
  computed: {
    buttonMessage: function () {
      switch (this.docState) {
        case 'saved': return 'Edit'
        case 'edited': return 'Save'
        case 'editing': return 'Cancel'
      }
    }
  }
})

<div id="app">
  <button @click="show = !show">请点击</button>
  <transition name="cartoon">
    <div v-show="show">点击我显示，再点击我隐藏</div>
  </transition>
  <button @click="hidden = !hidden">移动</button>
  <transition name="left">
    <div v-show="hidden">我走了</div>
  </transition>
  <transition>
    <button v-bind:key="docState">
      {{ buttonMessage }}
    </button>
</transition>
</div>

.cartoon-enter-active, .cartoon-leave-active{
  transition: all 1.4s ease;
}
.cartoon-enter, .cartoon-leave-to{
  opacity: 0;
}
.left-enter-active, .left-leave-active{
  position: absolute;
  transition: all 1.1s ease;
}
.left-enter, .left-leave-to{
  transform: translateX(120px);
}