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 相关文章推荐
JavaScript 动态生成方法的例子
Jul 22 Javascript
setTimeout函数兼容各主流浏览器运行执行效果实例
Jun 13 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
Sep 16 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
Oct 21 Javascript
Jsonp post 跨域方案
Jul 06 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
May 09 Javascript
JavaScript提升性能的常用技巧总结【经典】
Jun 20 Javascript
Javascript中prototype与__proto__的关系详解
Mar 11 Javascript
AngularJS与BootStrap模仿百度分页的示例代码
May 23 Javascript
React组件内事件传参实现tab切换的示例代码
Jul 04 Javascript
angular 内存溢出的问题解决
Jul 12 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
Aug 20 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
php桌面中心(二) 数据库写入
2007/03/11 PHP
PHP form 表单传参明细研究
2009/07/17 PHP
PHP strtotime函数详解
2009/12/18 PHP
PHP 获取文件路径(灵活应用__FILE__)
2013/02/15 PHP
js textarea自动增高并隐藏滚动条
2009/12/16 Javascript
jQuery学习笔记 操作jQuery对象 文档处理
2012/09/19 Javascript
简单的js表单验证函数
2013/10/28 Javascript
js实现收缩菜单效果实例代码
2013/10/30 Javascript
nodejs npm package.json中文文档
2014/09/04 NodeJs
jQuery层动画定位滑动效果的方法
2015/04/30 Javascript
JavaScript的代码编写格式规范指南
2015/12/07 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
2016/11/15 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
2017/04/17 Javascript
解决node修改后需频繁手动重启的问题
2018/05/13 Javascript
js 数组详细操作方法及解析合集
2018/06/01 Javascript
node.js调用C++函数的方法示例
2018/09/21 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
2019/08/28 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
2019/09/10 Javascript
Vue使用screenfull实现全屏效果
2020/09/17 Javascript
[03:04]2018年度DOTA2玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
pycharm远程linux开发和调试代码的方法
2018/07/17 Python
pyecharts动态轨迹图的实现示例
2020/04/17 Python
tensorflow 2.1.0 安装与实战教程(CASIA FACE v5)
2020/06/30 Python
15个应该掌握的Jupyter Notebook使用技巧(小结)
2020/09/23 Python
Selenium Webdriver元素定位的八种常用方式(小结)
2021/01/13 Python
用CSS3实现无限循环的无缝滚动的示例代码
2017/11/01 HTML / CSS
中国高端家电购物商城:顺电
2018/03/04 全球购物
康帕斯酒店预订:Compass Hospitality(支持中文)
2018/08/23 全球购物
高中生学习的自我评价
2013/12/14 职场文书
初中女生自我鉴定
2013/12/19 职场文书
自我评价范文分享
2014/01/04 职场文书
运输服务质量承诺书
2014/03/27 职场文书
教师作风整改措施思想汇报
2014/10/12 职场文书
党员批评与自我批评总结
2014/10/15 职场文书
2015年艾滋病防治工作总结
2015/05/22 职场文书
MySQL分区表管理命令汇总
2022/03/21 MySQL