好资源导航 » 文章资讯 » Vue中JS动画与Velocity.js的结合使用

Vue中JS动画与Velocity.js的结合使用

2023-08-29 02:26:04 72

前面学习了用css实现动画效果，那Vue中能不能用js实现动画效果呢？

其实Vue提供了很多动画钩子

enter

入场动画钩子函数有before-enter、enter、after-enter

before-enter

动画出现前的事件



helloworld

切换

letvm=newVue({ el:'#root', data:{ show:true }, methods:{ handleClick(){ this.show=!this.show }, handleBeforeEnter(el){//接收一个参数el，为dom元素 el.style.color='red' } } })

enter

before-enter事件结束后执行



helloworld

切换

letvm=newVue({ el:'#root', data:{ show:true }, methods:{ handleClick(){ this.show=!this.show }, handleBeforeEnter(el){ el.style.color='red' } handleEnter(el，done){//接收两个参数，第一个参数el为dom元素，第二个参数是done是个回调函数 setTimeout(()=>{ el.style.color='green' done()//done回调函数非常重要，在执行完动画后需手动执行下这个函数，相当于告诉Vue这个动画已经执行完了，会再去调用after-enter事件 },2000) } } })

after-enter

enter事件中done被调用后，after-enter事件会被触发



helloworld

切换 letvm=newVue({ el:'#root', data:{ show:true }, methods:{ handleClick(){ this.show=!this.show }, handleBeforeEnter(el){ el.style.color='red' }, handleEnter(el,done){ setTimeout(()=>{ el.style.color='green' done() },2000) }, handleAfterEnter(el){//接收一个参数el，为dom元素 setTimeout(()=>{ el.style.color='blue' },2000) } } })

leave

与入场动画对应的出场动画钩子函数有before-leave、leave、after-leave。它们的用法与入场动画用法一样

Velocity.js库

有了上面基础后，配合Velocity.js库，能实现更强大的动画效果。



helloworld

切换

letvm=newVue({
el:'#root',
data:{
show:true
},
methods:{
handleClick(){
this.show=!this.show
},
handleBeforeEnter(el){
el.style.opacity=0
},
handleEnter(el,done){
Velocity(el,{//第一个参数是要操作的dom元素
opacity:1
},{
duration:1000,//第三参数中需要配置一个complete属性，值为done，因为Velocity执行完后会自动执行complete属性，这里设置为done是让它去触发after-enter事件
complete:done
})
},
handleAfterEnter(el){
console.log('动画结束')
}
}
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

Vue中JS动画与Velocity.js的结合使用

热门推荐

随机推荐