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

Vue3衔接过渡动画

想要通过v-if或者v-show来实现动画的衔接动作，也看了网上的一些例子，这里给总结一下

这里看下效果：

这种过渡效果很简单，只需要用if语句来判断动画出现顺序即可

  <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>复制

css样式

/* 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;
}复制

这里如果是想点击一次过渡过去再次点击一次过渡回来的话，是不需要给两个不同的transition标签设置两种动画，只需要用同一个动画即可。当然你也可以使用v-enter-active和v-leave-active来写动画，这样的话transition就不需要加**name=‘h1’**了