好资源导航 » 文章资讯 » vue操作动画的记录animate.css实例代码

vue操作动画的记录animate.css实例代码

2023-08-24 04:08:06 52

transition动画

//使用动画库animate.css

//其中duration是绑定动画的时间统一设置进入与出去的时间
这里是动画的内容

//也可以这样使用

//其中duration是绑定动画的时间
这里是动画的内容

1.使用钩子函数实现半场动画例如加入购物车时小球的动画


//其中duration是绑定动画的时间
这里是动画的内容

varvm=newVue({
el:'#app',
data:{
return{
flag:false
}
},
methods:{
//注意:动画钩子函数的第一个参数:el,表示要执行动画的那个dom元素,是个原生的jsdom对象
beforeEnter(el){
//这个是表示动画入场之前,此时,动画尚未开始,可以在beforeEnter中,设置元素开始之前的起始样式
//设置小球开始动画之前的,起始位置.
el.style.transform="translate(0,0)";

},
enter(el,done){
//强制重绘刷新
el.offserWidth;
//enter表示动画开始之后的样式,这里,可以设置小球完成动画之后,结束状态

el.style.transform="translate(150px,450px)";
el.style.transition="all1slinear";
//立即消失done()方法,其实就是afterEnter()函数的引用
//el.addEventListener('transitionend',done);监听动画完成后执行
done()
},
afterEnter(el){
//动画完成之后,会调用afterEnter
this.flag=!this.flag
}
}

})

总结

以上所述是小编给大家介绍的vue操作动画的记录animate.css实例代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

vue操作动画的记录animate.css实例代码

热门推荐

随机推荐