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 相关文章推荐
Jquery 学习笔记(一)
Oct 13 Javascript
jQuery 扩展对input的一些操作方法
Oct 30 Javascript
让低版本浏览器支持input的placeholder属性(js方法)
Apr 03 Javascript
jquery控制display属性为none或block
Mar 31 Javascript
Jquery动态添加及删除页面节点元素示例代码
Jun 16 Javascript
js 实现的可折叠留言板(附源码下载)
Jul 01 Javascript
JavaScript实现强制重定向至HTTPS页面
Jun 10 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
May 05 Javascript
AngularJS表格详解及示例代码
Aug 17 Javascript
jQuery的事件预绑定
Dec 05 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
Oct 27 Javascript
解决layui 三级联动下拉框更新时回显的问题
Sep 03 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和JavaScrip分别获取关联数组的键值示例代码
2013/09/16 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题
2007/01/09 Javascript
通过Javascript将数据导出到外部Excel文档的函数代码
2012/06/15 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
2014/01/09 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
2014/06/16 Javascript
jquery实现可拖拽弹出层特效
2015/01/04 Javascript
JavaScript动态提示输入框输入字数的方法
2015/07/27 Javascript
JavaScrip常见的一些算法总结
2015/12/28 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
2017/09/28 Javascript
解决Jquery下拉框数据动态获取的问题
2018/01/25 jQuery
用npm安装vue和vue-cli,并使用webpack创建项目的方法
2018/09/28 Javascript
深度了解vue.js中hooks的相关知识
2019/06/14 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
2019/09/02 Javascript
Layui tree 下拉菜单树的实例代码
2019/09/21 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
2020/04/07 Javascript
[02:42]DOTA2英雄基础教程 杰奇洛
2013/12/23 DOTA
[11:42]2018DOTA2国际邀请赛寻真——OG卷土重来
2018/08/17 DOTA
python实现下载文件的三种方法
2017/02/09 Python
python通过socket实现多个连接并实现ssh功能详解
2017/11/08 Python
python微信跳一跳系列之自动计算跳一跳距离
2018/02/26 Python
python中in在list和dict中查找效率的对比分析
2018/05/04 Python
pyqt5的QWebEngineView 使用模板的方法
2018/08/18 Python
Python实现截取PDF文件中的几页代码实例
2019/03/11 Python
利用Tensorflow构建和训练自己的CNN来做简单的验证码识别方式
2020/01/20 Python
使用K.function()调试keras操作
2020/06/17 Python
python 实现两个npy档案合并
2020/07/01 Python
Python3如何使用多线程升程序运行速度
2020/08/11 Python
python -v 报错问题的解决方法
2020/09/15 Python
澳大利亚家具和家居用品在线:BROSA
2017/11/02 全球购物
美国尼曼百货官网:Neiman Marcus
2019/09/05 全球购物
阿玛尼美妆俄罗斯官网:Giorgio Armani Beauty RU
2020/07/19 全球购物
升职自荐信范文
2013/10/05 职场文书
部队党性分析材料
2014/02/16 职场文书
《找不到快乐的波斯猫》教学反思
2014/02/24 职场文书
《妈妈别哭,有我在》读后感3篇
2020/01/13 职场文书
如何创建一个创建MySQL数据库中的datetime类型
2022/03/21 MySQL