vue 1.0 结合animate.css定义动画效果


Posted in Javascript onJuly 11, 2018

Vue 1.0 动画(自定义动画)

步骤:

1.给当前动画元素添加‘transition'属性  其值就是动画名称(假如:fade)

2.给动画名称写css定义

a: .fade-transition{/*定义动画过渡*/   transition:1s  all ease;}

b: .fade-enter{/*定义进入动画  注意:进入离开最终一样*/}

c:fade-leave{/*定义离开动画*/}

html 如下:

<div id="wrap">
 <input type="button" value="按钮" @click="show">
 <div class="box" v-show='isShow' transition='fade'></div>
</div>
.box{
 width:100px;
 height:100px; 
}
.fade-transition{ /*定义动画的过渡效果*/
 transition:1s all ease; 
}
.fade-enter{ /*进入动画*/
 opacity:0; 
}
.fade-leave{/*离开的动画*/
 opacity:0;
 transform:translate(200px) 
}

js

var vm=new Vue({
el:'#box',

data:{


isShow:true

},

methods:{


show(){



this.isShow=!this.isShow;


}

}
});

vue 1.0 结合animate.css定义动画

页面记得引入animate.cdd

html

<div id="box2">
  <input type="button" value="按钮" @click='show'>
  <div id="div2" class="animated" v-show='isShow' transition="bounce">
  </div>
</div>

css

#div2{
 width: 100px;
 height: 100px;
 background: red;
 margin: 50px auto;
}

js

var vm2=new Vue({
  el:'#box2',
   data:{
   isShow:true,
   },
   methods:{
    show(){
     this.isShow=!this.isShow;
    }
  },
  transitions:{
   bounce:{
   enterClass:"zoomInLeft",
   
leaveClass:"zoomInRight"
   }
  }
 })

总结

以上所述是小编给大家介绍的Vue 1.0自定义动画效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery Mobile入门—外部链接切换示例代码
Jan 08 Javascript
JS的千分位算法实现思路
Jul 31 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
Aug 28 Javascript
Javascript单元测试框架QUnitjs详细介绍
May 08 Javascript
javascript常用方法总结
May 14 Javascript
浅谈javascript中return语句
Jul 15 Javascript
第一次接触JS require.js模块化工具
Apr 17 Javascript
angular ng-repeat数组中的数组实例
Feb 18 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
Jun 15 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
Jan 10 Javascript
ant design的table组件实现全选功能以及自定义分页
Nov 17 Javascript
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
微信小程序实现发红包功能
Jul 11 #Javascript
vue框架搭建之axios使用教程
Jul 11 #Javascript
vue中动态设置meta标签和title标签的方法
Jul 11 #Javascript
Vue项目添加动态浏览器头部title的方法
Jul 11 #Javascript
node.js到底要不要加分号浅析
Jul 11 #Javascript
微信小程序实现红包功能(后端PHP实现逻辑)
Jul 11 #Javascript
Vue如何实现响应式系统
Jul 11 #Javascript
You might like
php学习之简单计算器实现代码
2011/06/09 PHP
php获取url参数方法总结
2014/11/13 PHP
php导入大量数据到mysql性能优化技巧
2014/12/29 PHP
php猴子选大王问题解决方法
2015/05/12 PHP
学习php设计模式 php实现原型模式(prototype)
2015/12/07 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
jquery动画2.元素坐标动画效果(创建一个图片走廊)
2012/08/24 Javascript
Js中获取frames中的元素示例代码
2013/07/30 Javascript
实现图片预加载的三大方法及优缺点分析
2014/11/19 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
2015/06/01 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
2015/06/04 Javascript
jquery插件uploadify实现带进度条的文件批量上传
2015/12/13 Javascript
jquery调整表格行tr上下顺序实例讲解
2016/01/09 Javascript
一系列Bootstrap导航条使用方法分享
2016/04/29 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
2017/07/04 Javascript
jQuery中过滤器的基本用法示例
2017/10/11 jQuery
vue微信分享到朋友圈 vue微信发送给好友
2018/11/28 Javascript
node运行js获得输出的三种方式示例详解
2020/07/02 Javascript
在vue中使用防抖函数组件操作
2020/07/26 Javascript
Python新手实现2048小游戏
2015/03/31 Python
pygame游戏之旅 如何制作游戏障碍
2018/11/20 Python
对python产生随机的二维数组实例详解
2018/12/13 Python
用Python实现将一张图片分成9宫格的示例
2019/07/05 Python
在python shell中运行python文件的实现
2019/12/21 Python
Python 实现训练集、测试集随机划分
2020/01/08 Python
浅谈图像处理中掩膜(mask)的意义
2020/02/19 Python
在脚本中单独使用django的ORM模型详解
2020/04/01 Python
Python3+SQLAlchemy+Sqlite3实现ORM教程
2021/02/16 Python
HTML 5.1来了 9月份正式发布 更新内容预览
2016/04/26 HTML / CSS
美国木工工具和用品商店:Woodcraft
2019/10/30 全球购物
阿迪达斯越南官网:adidas越南
2020/07/19 全球购物
幼儿园大班教师随笔
2015/08/14 职场文书
创业项目大全(适合在家创业的项目)
2019/08/15 职场文书
WCG2010 星际争霸决赛 Flash vs Goojila 1 星际经典比赛回顾
2022/04/01 星际争霸
nginx之内存池的实现
2022/06/28 Servers