vue过渡模式（out-in）不生效问题

用vue的过渡模式来实现一个开关，实现点击之后延迟切换的效果.但是一开始mode='out-in'一直不生效，原因是切换的元素tag名相同时，vue会直接替换这两个元素的content而不是切换。所以需给元素加一个distinct key。

 <div>
      <transition name="fade"
                  mode="out-in">
        <button @click="co"
                v-if="on"
                key="1">{{bt}}</button>
        <button @click="co"
                key='2'>{{bt}}</button>
      </transition>
    </div>

//script
export default {
  data () {
    return {
      show: false,
      docState: 'saved',
      on: false,
      bt: 'on'
    }
  },
  methods: {
    co () {
      this.on = this.on === false
      this.bt = this.on ? 'on' : 'off'
    }
  }
}

//style
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-active {
  opacity: 0;
}