<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效果