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 相关文章推荐
TimergliderJS 一个基于jQuery的时间轴插件
Dec 07 Javascript
jquery显示和隐藏div特效实例
Feb 27 Javascript
Jquery树插件zTree用法入门教程
Feb 17 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
Mar 13 Javascript
javascript实现回到顶部特效
May 06 Javascript
jQuery学习笔记之回调函数
Aug 15 Javascript
vue快捷键与基础指令详解
Jun 01 Javascript
通俗解释JavaScript正则表达式快速记忆
Aug 23 Javascript
浅谈Webpack下多环境配置的思路
Jun 27 Javascript
详解jQuery-each()方法
Mar 13 jQuery
小程序云开发如何实现图片上传及发表文字
May 17 Javascript
微信小程序返回上一页传参并刷新过程解析
Dec 13 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
神族 PROTOSS 概述
2020/03/14 星际争霸
PHP中的日期及时间
2006/11/23 PHP
php file_put_contents()功能函数(集成了fopen、fwrite、fclose)
2011/05/24 PHP
windows中为php安装mongodb与memcache
2015/01/06 PHP
php好代码风格的阶段性总结
2016/06/25 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
对php 判断http还是https,以及获得当前url的方法详解
2019/01/15 PHP
Javascript学习笔记 delete运算符
2011/09/13 Javascript
灵活应用js调试技巧解决样式问题的步骤分享
2012/03/15 Javascript
用js判断是否为360浏览器的实现代码
2015/01/15 Javascript
jQuery实现跨域
2015/02/03 Javascript
angularjs创建弹出框实现拖动效果
2020/08/25 Javascript
理解Angular数据双向绑定
2016/01/10 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
2016/03/13 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
2016/09/15 Javascript
JS中如何实现Laravel的route函数详解
2017/02/12 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
2018/04/17 Javascript
vue elementUI 表单校验功能之数组多层嵌套
2019/06/04 Javascript
JSONP 的原理、理解 与 实例分析
2020/05/16 Javascript
解决vue scoped html样式无效的问题
2020/10/24 Javascript
[47:39]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs OPTIC
2018/03/31 DOTA
Python的内存泄漏及gc模块的使用分析
2014/07/16 Python
python使用datetime模块计算各种时间间隔的方法
2015/03/24 Python
Python计算三维矢量幅度的方法
2015/06/15 Python
python中string模块各属性以及函数的用法介绍
2016/05/30 Python
基于Python的接口测试框架实例
2016/11/04 Python
ubuntu 16.04下python版本切换的方法
2019/06/14 Python
澳大利亚礼品卡商店:Gift Card Store
2019/06/24 全球购物
自荐信的五个重要部分
2013/10/29 职场文书
洗发水广告词
2014/03/13 职场文书
2014最新党员违纪检讨书
2014/10/12 职场文书
会议欢迎词
2015/01/23 职场文书
党员带头倡议书
2015/04/29 职场文书
歌剧魅影观后感
2015/06/05 职场文书
运动会闭幕式致辞
2015/07/29 职场文书
Redis中一个String类型引发的惨案
2021/07/25 Redis