• 周日. 6月 26th, 2022

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签

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

admin

11月 28, 2021
<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 {
   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 {
   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效果

发表评论

您的电子邮箱地址不会被公开。