Vue3——使用v-if或v-show来实现过渡的动画效果

<transition name="h1">
    <div v-if="status.block" class="box" @click="box1">
      <h1>nanchen</h1>
    </div>
  </transition>
  <div style="width:100%;height:100vh;background-color:white">
    <transition name="h1">
      <div v-if="status.block == false" @click="box2">
        当前时间
      </div>
    </transition>
  </div>

/* 1.过渡动画 */
@keyframes axisX {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0px);
  }
}
/* 2. 过渡类名 */
/* 开始 */
.h1-enter-active {
  animation: axisX 1s;
}
/* 结束 */
.h1-leave-active {
  animation: axisX 1s reverse;
}