vue里的transtion

小demo。学习下vue里封装的transtion怎么用。

完整代码

<template>
  <transition name="slide-right">
    <div v-if="showAdv" class="adv">
      <div class="adv-btn" @click="closeTimer">
        JUMP&nbsp;{{ countDown }}
      </div>
      <div class="adv-bg">
        Be Brave.
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'Adv',
  data() {
    return {
      showAdv: true,
      countDown: 5,
      timer: null
    }
  },
  watch: {
    countDown(val, oldVal) {
      if (val === 0) {
        this.closeTimer()
        this.showAdv = false
      }
    }
  },
  mounted() {
    this.openTimer()
  },
  beforeDestroy() {
    this.closeTimer()
  },
  methods: {
    openTimer() {
      this.timer = setInterval(() => {
        this.countDown--
      }, 1000)
    },
    closeTimer() {
      clearInterval(this.timer)
      this.timer = null
      this.showAdv = false
    }
  }
}
</script>

<style lang="scss" scoped>
.adv{
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background: white;
  z-index: 11;
  &-bg{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: $typora-font-family;
    color: black;
    font-size: 80px;
    background: url(../../../assets/images/bg.png) no-repeat;
    background-origin: content-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
  }
  &-btn{
    background: rgba(0,0,0,0.2);
    color: white;
    position: absolute;
    top: $padding-md;
    right: $padding-md;
    padding: $padding-xxs $padding-md;
    border-radius: $border-radius-xxl;
  }
}
</style>

/*slide-right*/
//transition: [属性名] [持续时间] [速度曲线] [延迟时间];
//transform: [转换函数];

//leave-to:[消失结束态]
//leave-active:[消失动画]

.slide-right-leave-active {
  transition: all 1s;
  transform: translateX(750px);
}