Vue动画之使用volecity.js动画库
在vue中使用动画都要放在transition组件中,以后不再累述!我们还看上个例子!
<div id="app">
<transition @before-enter="beforeEnter" @enter="handleEnter" @after-enter="afterEnter">
<p v-if="show" volecity>Hello 十月梦想!</p>
</transition>
<button @click="toggle">切换</button>
</div>使用velocity需要在动画元素上标注volecity属性,然后transition有几个状态,动画进入(before-enter,enter,after-enter),到达指定动画状态会自动执行!动画离开也有对应的leave-xxx等,不再累述,用法一样!
在methods中指定这几个方法!,enter是进入动画执行时候!
var app=new Vue({
el:"#app",
data:{
show:true
},
methods:{
toggle:function(){
this.show=!this.show;
},
beforeEnter:(el)=>{
el.style.opacity=0
console.log('before')
},
handleEnter:(el,done)=>{
Velocity(el,{opacity:1,color:'red'},{duration:5000},{complete:done()})
// el.style.color="red";
// done();
},
afterEnter:()=>{
console.log('after')
}
}
})不同状态可以传入一个el,就是所在的transition所包含的元素,在enetr可以传入el和done,只有done执行才可以执行after这个状态!
velocity语法:el,css变化,时长,等需要执行done,才能继续这个after
Velocity(el,{opacity:1,color:'red'},{duration:5000},{complete:done()})本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-9-16，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读