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 相关文章推荐
你的编程语言可以这样做吗?
Sep 07 Javascript
JavaScript 事件系统
Jul 22 Javascript
jQuery中bind与live的用法及区别小结
Jan 27 Javascript
js加入收藏夹代码(兼容ie/ff/op)
May 16 Javascript
node.js中的fs.fstat方法使用说明
Dec 15 Javascript
Bootstrap table使用方法记录
Aug 23 Javascript
nuxt+axios解决前后端分离SSR的示例代码
Oct 24 Javascript
Vuex 单状态库与多模块状态库详解
Dec 11 Javascript
vue+elementUI动态生成面包屑导航教程
Nov 04 Javascript
详解Webpack抽离第三方类库以及common解决方案
Mar 30 Javascript
微信小程序手动添加收货地址省市区联动
May 18 Javascript
node.js 基于 STMP 协议和 EWS 协议发送邮件
Feb 14 Javascript
微信小程序实现发红包功能
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
一个域名查询的程序
2006/10/09 PHP
一个可以删除字符串中HTML标记的PHP函数
2006/10/09 PHP
完美解决PHP中文乱码
2009/11/26 PHP
PHP中开发XML应用程序之基础篇 添加节点 删除节点 查询节点 查询节
2010/07/09 PHP
php 不使用js实现页面跳转
2014/02/11 PHP
php通过会话控制实现身份验证实例
2016/10/18 PHP
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
2011/11/14 Javascript
Json序列化和反序列化方法解析
2013/12/19 Javascript
window.location 对象所包含的属性
2014/10/10 Javascript
JS &amp; JQuery 动态添加 select option
2016/06/08 Javascript
Javascript中的对象和原型(二)
2016/08/12 Javascript
js继承实现方法详解
2016/12/16 Javascript
5种JavaScript脚本加载的方式
2017/01/16 Javascript
form表单序列化详解(推荐)
2017/08/15 Javascript
React-Native之定时器Timer的实现代码
2017/10/04 Javascript
JS解决position:sticky的兼容性问题的方法
2017/10/17 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
2018/06/23 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
2018/07/05 Javascript
vue 中Virtual Dom被创建的方法
2019/04/15 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
2019/07/19 Javascript
ElementUI之Message功能拓展详解
2019/10/18 Javascript
Javascript实现html转pdf高清版(提高分辨率)
2020/02/19 Javascript
python 获取list特定元素下标的实例讲解
2018/04/09 Python
Pandas读取并修改excel的示例代码
2019/02/17 Python
python requests指定出口ip的例子
2019/07/25 Python
python利用re,bs4,requests模块获取股票数据
2019/07/29 Python
森海塞尔美国官网:Sennheiser耳机与耳麦
2017/07/19 全球购物
美国庭院家具购物网站:AlphaMarts
2019/04/10 全球购物
个人自荐信
2013/12/05 职场文书
培训主管的职业生涯规划
2014/03/06 职场文书
群众路线剖析材料范文
2014/10/09 职场文书
党员检讨书范文
2014/12/27 职场文书
杨善洲观后感
2015/06/04 职场文书
大学副班长竞选稿
2015/11/21 职场文书
坚持不是死撑,更重要的是心态
2019/08/19 职场文书
Mybatis是这样防止sql注入的
2021/12/06 Java/Android