Vue_JS动画与Velocity.js动画

叶经略
2023-12-01

一.JS动画
前面我们用css实现动画效果,那可不可以用JS来实现动画效果么?可以的
在transition标签里定义触发事件

@before-enter:在进入动画之前触发的函数,有一个参数,指的是要执行动画的元素

@enter:在进入动画执行的函数,有两个参数,第一个指执行动画的元素,第二个是动画完成的参数

@after-enter:在执行完enter之后执行的事件。有一个参数,指执行动画的元素

eg:

<transition name='fade'
     @before-enter='beforeenterClick'
     @enter='enterClick'
     @after-enter='afterenterClick'>
  <div v-if="cssanimate">hello css animate</div>
</transition>
  <button @click='cssclick'>css动画</button>

在methods中定义每一时刻触发事件的动作。

 beforeenterClick:function(el){
      el.style.color ='red';
},
enterClick:function(el,done){
    setTimeOut(()=>{
       el.style.color = 'green';
},2000)
setTimeOut(()=>{
  done()
},4000)
  },
afterenterClick:function(el){
   el.style.color = '#000'
}

需要注意的是,使用after-enter之前,需要在enter事件中执行done();

这样就可以实现JS的动画效果了。

同理出场动画,和入场动画是相似的。@before-leave、@leave、@after-leave

二.Velocity.js动画

在前端,我们经常使用Velocity.js库来实现我们的动画

进入项目

安装 npm install velocity-animate –save-dev

页面引入: import Velocity from ‘velocity-animate’

仍然是JS触发事件,在实践中应用velocity的动画

 beforeenterClick:function(el){
      el.style.opacity =0;
},
     enterClick:function(el,done){
     Velocity(el,
      {opacity:1},
      {duration:1000,
       complete:done
     })
  },
afterenterClick:function(el){
    console.log('动画结束')
}
 类似资料: