HTMl

<transition name="fade">
        <div class="submit-success" v-show="isSuccess">
          <div class="word">提交成功</div>
        </div>
      </transition>
<div @click="submit">提交</div>

JS

<script>
export default {
  data() {
    return {
      isSuccess: false
    }
  },
  methods: {
    submit() {
      this.isSuccess = true
      setTimeout(() => {
        this.isSuccess = false
      }, 2000)
    }
  }
}
</script>

CSS

<style lang="scss" scoped>
.fade-leave,   // 离开前,进入后透明度是1
.fade-enter-to {
  opacity: 1;
}
.fade-leave-active,
.fade-enter-active {
  transition: all 1.5s; //过度是2秒
}
.fade-leave-to,
.fade-enter {
  opacity: 0;
}
</style>
Logo

前往低代码交流专区

更多推荐