首页 前端知识 Vue3——使用v-if或v-show来实现过渡的动画效果

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

2024-02-02 09:02:21 前端知识 前端哥 287 631 我要收藏

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-activev-leave-active来写动画,这样的话transition就不需要加**name=‘h1’**了

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1082.html
标签
css动画
评论
发布的文章

Ajax用法总结

2024-02-14 09:02:07

JQuery之jsTree树形插件

2024-02-14 09:02:01

Why React Doesn‘t Need jQuery?

2024-02-14 09:02:00

jQuery模板字符串

2024-02-14 09:02:58

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!