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实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月23日
2024年09月23日
- 华少翌.2005-华少翌【中唱艺能】【WAV+CUE】
- 群星《十二女声Ⅱ》[WAV/CUE/分轨][527MB]
- 大自然音乐系列《漫步在山裡》[WAV/CUE/分轨][502.8MB]
- 大自然音乐系列《星光夜语》[WAV/CUE/分轨][453.3MB]
- 史依弘《史依弘交响乐京剧演唱专辑HQ》头版限量编号[WAV+CUE]
- 曼丽2020《女人三十风继续吹》HQCD[WAV+CUE]
- 曼丽2021《女人三十2雾之恋》HQCD[WAV+CUE]
- 隔壁老樊.2019-我曾【好听音乐】【FLAC分轨】
- 高林生.1993-牵挂你的人是我【白天鹅】【WAV+CUE】
- 洪卓立.2012-找个懂我的女孩(国专)【英皇娱乐】【WAV+CUE】
- 曼丽2022《女人三十3晚秋》HQCD[WAV+CUE]
- 曼丽2018《女人三十4冬天》HQCD[WAV+CUE]
- 柏菲-《好歌30年壹》限量开盘母带ORMCD[低速原抓WAV+CUE]
- 大自然音乐系列《水舞》[WAV/CUE/分轨][424.3MB]
- 大自然音乐系列《星光夜语》[WAV/CUE/分轨][453.3MB]