vue动画

最新推荐文章于 2023-11-28 14:50:05 发布

HappyCodingTopOne

最新推荐文章于 2023-11-28 14:50:05 发布

阅读量151

点赞数

分类专栏： vue js 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_43852916/article/details/126396873

版权

vue 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

8 篇文章 0 订阅

订阅专栏

appear的用法和enter的用法相似，但是它只是在第一次渲染的时候才会起作用

<transition
       appear
       enter-active-class="animate__animated animate__lightSpeedInRight"
       leave-active-class="animate__animated animate__lightSpeedOutRight"
       appear-active-class="animate__animated animate__lightSpeedInRight"
       >
        <div v-if="aniFlag" class="comic">哈哈哈</div>
    </transition>

也可以同时使用animate和自己定义的动画，
当两者的动画时间不一样时，可以设置type，选择是以transtion还是animation,因为animate用的是animation

    <transition
      type="transition"
      appear
      enter-active-class="animate__animated animate__lightSpeedInRight fade-enter-active"
      leave-active-class="animate__animated animate__lightSpeedOutRight fade-leave-active"
      appear-active-class="animate__animated animate__lightSpeedInRight"
    >
      <div v-if="aniFlag" class="comic">哈哈哈</div>
    </transition>

当然我也可以自己定义动画的总时长,定义duration时长

 <transition
      :duration="5000"
      appear
      enter-active-class="animate__animated animate__swing fade-enter-active"
      leave-active-class="animate__animated animate__shakeY fade-leave-active"
      appear-active-class="animate__animated animate__swing"
    >
      <div v-if="aniFlag" class="comic">哈哈哈</div>
    </transition>

或者更复杂一些,定义入动画和出动画的时长

<transition
      :duration="{enter:5000,leave:5000}"
      appear
      enter-active-class="animate__animated animate__swing fade-enter-active"
      leave-active-class="animate__animated animate__shakeY fade-leave-active"
      appear-active-class="animate__animated animate__swing"
    >
      <div v-if="aniFlag" class="comic">哈哈哈</div>
    </transition>

Vue中的js动画与Velocity.js的结合

vue的transition也有js动画钩子函数

  <transition
     name="fade"
     @before-enter="handleBeforeEnter"
     @enter="handleEnter"
     @after-enter="handleAfterEnter"
    >
      <div v-if="aniFlag" class="comic">哈哈哈</div>
    </transition>

  // 即将显示之前的钩子函数  el是当前元素
    handleBeforeEnter(el){
     el.style.color="blue"
    },
    // 当运行动画的时候
    handleEnter(el,done){
      setTimeout(()=>{
        el.style.color="green"
      },2000)
      setTimeout(()=>{
        done() //动画执行完毕
      },4000)
    },
    // 当done执行完之后,又会触发一个钩子函数
    handleAfterEnter(el){
        el.style.color="black"
    },

同理有入场动画，还有出场动画，出场动画的钩子函数是before-leave、leave、after-leave 用法和入场钩子类似

Velocity.js的使用

   // 即将显示之前的钩子函数  el是当前元素
    handleBeforeEnter(el){
     el.style.opacity=0
    },
    // 当运行动画的时候
    handleEnter(el,done){
      velocity(el,{opacity:1},{duration:2000,complete:done})
    },
    // 当done执行完之后,又会触发一个钩子函数
    handleAfterEnter(el){
      console.log('====================================');
      console.log('动画结束');
      console.log('====================================');
    },

多个元素动画
<–多个元素的动画 in-out先进入后隐藏 out-in先隐藏后进入–>

 <transition
    mode="out-in"
    >
      <div v-if="aniFlag" class="comic" key="1">哈哈哈</div>
      <div v-if="!aniFlag" class="comic" key="2">666</div>
    </transition>

.v-enter,
.v-leave-to {
  opacity: 0;
}
.v-enter-active,
.v-leave-active {
  transition: opacity 3s;
}