vue的transition相同元素通过v-if，以及绑定key的区别

<div @click="ange">改变</div>
      <transition name="slide">
        <!-- <button v-if="docState === 'saved'" key="saved">Save</button>
        <button v-if="docState === 'edited'" key="edited">edited</button>
        <button v-if="docState === 'editing'" key="editing">editing</button> -->
        <button :key="docState">editing</button>
      </transition>

 docState: null,
      docStateNum: 0,

 ange() {
      this.docStateNum = this.docStateNum + 1;
      console.log(this.docStateNum);
      if (this.docStateNum == 1) {
        this.docState = "saved";
      } else if (this.docStateNum == 2) {
        this.docState = "edited";
      } else if (this.docStateNum == 3) {
        this.docState = "editing";
      }

      // if ((this.docStateNum = 3)) {
      //   this.docStateNum = 0;
      // }
    },

<style scoped>
.textBox {
  width: 100%;
  height: 40px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  text-align: center;
  border: 1px solid #cacaca;
}
button {
  position: absolute;
  bottom: 0;
  left: 0;
}
.text {
  width: 100%;
  position: absolute;
  bottom: 0;
}
.slide-enter-active,
.slide-leave-active {
  transition: all 0.5s linear;
}
.slide-enter {
  transform: translateY(20px) scale(1);
  opacity: 1;
}
.slide-leave-to {
  transform: translateY(-20px) scale(0.8);
  opacity: 0;
}
</style>

效果就是点击一下改变的div,一个个button都会以过渡的方式去替换，效果场景可以为广告公告notice效果