Vue_JS动画与Velocity.js动画

Vue_JS动画与Velocity.js动画

2018年06月30日 09:13:50 _dalianmiao 阅读数：378更多

个人分类： Vue_学习笔记

一.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>

• 1
• 2
• 3
• 4
• 5
• 6
• 7

在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'
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

需要注意的是，使用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('动画结束')
}

https://blog.csdn.net/hani_wen/article/details/80806000