<transition>
 <button v-if="isEditing" key="save">
  Save
 </button>
 <button v-else key="edit">
  Edit
 </button>
</transition>

<transition>
 <button v-bind:key="isEditing">
  {{ isEditing ? 'Save' : 'Edit' }}
 </button>
</transition>

<transition>
 <button v-if="docState === 'saved'" key="saved">
  Edit
 </button>
 <button v-if="docState === 'edited'" key="edited">
  Save
 </button>
 <button v-if="docState === 'editing'" key="editing">
  Cancel
 </button>
</transition>

<transition>
 <button v-bind:key="docState">
  {{ buttonMessage }}
 </button>
</transition>

computed: {
 buttonMessage: function () {
  switch (this.docState) {
   case 'saved': return 'Edit'
   case 'edited': return 'Save'
   case 'editing': return 'Cancel'
  }
 }
}

<transition name="fade" mode="out-in">
 <!-- ... the buttons ... -->
</transition>

<div class="my-div" id="app">
  <transition name="fade">
    <button class="btn" :key="show" @click="show=!show">{{show ? 'on' : 'off'}}</button>
    <!--<button key="on" v-if="show" class="btn" @click="show = !show">on</button>-->
    <!--<button key="off" v-else class="btn" @click="show = !show">off</button>-->
  </transition>
</div>

    .my-div{
      position: relative;
    }
    .btn{
      position: absolute;
      left: 30px;
      top: 10px;
    }

    .fade-enter-active, .fade-leave-active{
      transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to{
      opacity: 0;
    }

new Vue({
  el:'#app',
  data:{
    show : true
  }
})

<div class="my-div" id="app">
  <transition name="fade">
    <button class="btn" :key="key" >{{btnContent}}</button>
  </transition>
</div>

    .my-div{
      position: relative;
    }
    .btn{
      position: absolute;
      left: 30px;
      top: 10px;
    }

    .fade-enter-active, .fade-leave-active{
      transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to{
      opacity: 0;
    }

var app = new Vue({
  el:'#app',
  data:{
    key:'add'
  },
  computed:{
    btnContent:function () {
      switch (this.key){
        case 'add' : return 'Add'
        case 'edit' : return 'Edit'
        case 'delete' : return 'Delete'
      }
    }
  }
})

<div id="app">
  <transition name="fade" mode="out-in">
    <button :key="show" @click="show=!show">{{show ? 'on' : 'off'}}</button>
  </transition>
</div>

    .fade-enter-active, .fade-leave-active{
      transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to{
      opacity: 0;
    }

new Vue({
  el:'#app',
  data:{
    show : true
  }
})

<div id="app">
  <transition name="fade" mode="out-in">
    <component :is="view"></component>
  </transition>
</div>

    .fade-enter-active, .fade-leave-active{
      transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to{
      opacity: 0;
    }

var app = new Vue({
  el:'#app',
  data:{
    view:'v-a'
  },
  components:{
    'v-a':{
      template:'<div> component a </div>'
    },
    'v-b':{
      template:'<div> component b </div>'
    },
  }
})