小编给大家分享一下vue如何操作动画，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
成都创新互联主要从事网站设计制作、
网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务鹿邑,10多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108
transition动画
//使用动画库animate.css
//其中duration是绑定动画的时间 统一设置进入与出去的时间
这里是动画的内容
//也可以这样使用
//其中duration是绑定动画的时间
这里是动画的内容
1.使用钩子函数实现半场动画 例如加入购物车时小球的动画
//其中duration是绑定动画的时间
这里是动画的内容
var vm=new Vue({
el:'#app',
data:{
return {
flag:false
}
},
methods:{
//注意:动画钩子函数的第一个参数:el,表示要执行动画的那个dom元素,是个原生的js dom对象
beforeEnter(el){
//这个是表示动画入场之前,此时,动画尚未开始,可以在beforeEnter中,设置元素开始之前的起 始样式
//设置小球开始动画之前的,起始位置.
el.style.transform="translate(0,0)";
},
enter(el,done){
//强制重绘 刷新
el.offserWidth;
//enter 表示动画 开始之后的样式,这里,可以设置小球完成动画之后,结束状态
el.style.transform="translate(150px,450px)";
el.style.transition="all 1s linear";
//立即消失done()方法 ,其实就是afterEnter()函数的引用
//el.addEventListener('transitionend', done);监听动画完成后执行
done()
},
afterEnter(el){
//动画完成之后,会调用afterEnter
this.flag=! this.flag
}
}
})
以上是“vue如何操作动画”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
文章名称：vue如何操作动画-创新互联
转载来于：
http://jkwzsj.com/article/poesc.html
