网络编程 
首页 > 网络编程 > 浏览文章

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

(编辑:jimmy 日期: 2024/11/28 浏览:3 次 )

transition动画

//使用动画库animate.css
<transition enter-active-class='animated bounceIn' leave-active-class='animated bounceOut' :duration='200'>
//其中duration是绑定动画的时间 统一设置进入与出去的时间
<h3 v-if='flag'>这里是动画的内容</h3>
</transition >
//也可以这样使用
<transition enter-active-class='bounceIn' leave-active-class='bounceOut' :duration='{enter:200,leave:400}'>
//其中duration是绑定动画的时间
<h3 v-if='flag' class='animated'>这里是动画的内容</h3>
</transition >

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

<transition @before-enter='beforeEnter' @enter='enter' @after-enter='afterEnter'>
//其中duration是绑定动画的时间
<h3 v-if='flag' >这里是动画的内容</h3>
</transition >
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操作动画的记录animate.css实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

上一篇:详解在HTTPS 项目中使用百度地图 API
下一篇:JS原生瀑布流效果实现
一句话新闻
高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 网站地图 SiteMap