vue 1.0 结合animate.css定义动画效果
时间:2018-07-11
本文分步骤给大家介绍了Vue 1.0自定义动画效果,vue1.0代码结合animate.css定义动画,页面一定要引入animate.cdd,具体实例代码大家参考下本文
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自定义动画效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- Golang语言社区--go语言编写Web程序
- Golang语言社区--Go语言基础第五节流程控制
- (14)不同基因坐标转换-生信菜鸟团博客2周年精选文章集
- (15)基因组各种版本对应关系-生信菜鸟团博客2周年精选文章集
- go 并发处理脚本
- 生信菜鸟团博客2周年精选文章集(4)NCBI数据库的几个探索
- PHP 的前世今生
- 【直播】我的基因组49:Y染色体的SNV不能用常规流程来找?
- 【直播】我的基因组46:SNV突变(96种)频谱的制作
- 深入剖析-Oracle索引分支块的结构
- 【直播】我的基因组48:我可能测了一个假的全基因组
- 【直播】我的基因组47:测序深度和GC含量的关系
- 【直播】我的基因组47:测序深度和GC含量的关系
- SNV突变(96种)频谱的制作
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Bash:选择结构之case
- ElasticSearch的Reindex
- 10行Python代码自动清理电脑内重复文件,解放双手!
- 【投稿】刀哥:Rust学习笔记 3
- 为你的数据添加置信区间
- Linux磁盘管理
- Vue项目中简单的store模式
- 5分钟学linux命令之split
- 分母为0一定会抛异常吗?
- 明明有class为什么还是报ClassNotFoundException?
- Maven 错误找不到符号
- 环境变量配置为jdk8,却显示java版本为jdk7
- Python脚本按照当前日期创建多级目录
- linux常用的读取文件内容指令
- Executors.newSingleThreadScheduledExecutor();线程池中放入多个线程问题