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


Posted in Javascript onApril 26, 2019

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实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
用javascript动态调整iframe高度的方法
Mar 06 Javascript
PPK 谈 JavaScript 的 this 关键字 [翻译]
Sep 29 Javascript
JQuery上传插件Uploadify使用详解及错误处理
Apr 27 Javascript
javascript 正则表达式相关应介绍
Nov 27 Javascript
IE不支持getElementsByClassName最终完美解决方案
Dec 17 Javascript
解析javascript 实用函数的使用详解
May 10 Javascript
js动态调用css属性的小规律及实例说明
Dec 28 Javascript
Bootstrap每天必学之折叠(Collapse)插件
Apr 25 Javascript
浅谈window.onbeforeunload() 事件调用ajax
Jun 29 Javascript
layui表格实现代码
May 20 Javascript
Vue响应式原理Observer、Dep、Watcher理解
Jun 06 Javascript
Vue+Element-UI实现上传图片并压缩
Nov 26 Javascript
JS原生瀑布流效果实现
Apr 26 #Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
Apr 26 #Javascript
详解auto-vue-file:一个自动创建vue组件的包
Apr 26 #Javascript
vue组件间的参数传递实例详解
Apr 26 #Javascript
详解VUE前端按钮权限控制
Apr 26 #Javascript
微信小程序开发之点击按钮退出小程序的实现方法
Apr 26 #Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
Apr 26 #Javascript
You might like
使用PHP和XSL stylesheets转换XML文档
2006/10/09 PHP
浅析PHP递归函数返回值使用方法
2013/02/18 PHP
php比较两个字符串长度的方法
2015/07/13 PHP
PHP设计模式(三)建造者模式Builder实例详解【创建型】
2020/05/02 PHP
JavaScript 学习笔记(十五)
2010/01/28 Javascript
原生js写的放大镜效果
2012/08/22 Javascript
jQuery语法总结和注意事项小结
2012/11/11 Javascript
Js注册协议倒计时的小例子
2013/06/24 Javascript
js中的this关键字详解
2013/09/25 Javascript
一个js导致的jquery失效问题的解决方法
2013/11/27 Javascript
js data日期初始化的5种方法
2013/12/29 Javascript
js修改原型的属性使用介绍
2014/01/26 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
2014/10/14 Javascript
JavaScript中判断两个字符串是否相等的方法
2015/07/07 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
2015/09/01 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
2016/09/18 Javascript
get  post jsonp三种数据交互形式实例详解
2017/08/25 Javascript
简易Vue评论框架的实现(父组件的实现)
2018/01/08 Javascript
JavaScript实现简单音乐播放器
2020/04/17 Javascript
Angular6 用户自定义标签开发的实现方法
2019/01/08 Javascript
vue语法自动转typescript(解放双手)
2019/09/18 Javascript
javascript sort()对数组中的元素进行排序详解
2019/10/13 Javascript
node静态服务器实现静态读取文件或文件夹
2019/12/03 Javascript
js实现金山打字通小游戏
2020/07/24 Javascript
浅谈Python中chr、unichr、ord字符函数之间的对比
2016/06/16 Python
python 批量下载bilibili视频的gui程序
2020/11/20 Python
跨域修改iframe页面内容详解
2019/10/31 HTML / CSS
eharmony澳大利亚:网上约会服务
2020/02/29 全球购物
Ajxa常见问题都有哪些
2014/03/26 面试题
《自选商场》教学反思
2014/02/14 职场文书
十佳标兵事迹材料
2014/08/18 职场文书
祖国在我心中演讲稿(小学生)
2014/09/23 职场文书
2014年煤矿工人工作总结
2014/12/08 职场文书
教师节主持词开场白
2015/05/29 职场文书
付款证明格式范文
2015/06/19 职场文书
2016年校园重阳节广播稿
2015/12/18 职场文书