vue2.0中transition组件的用法
作用：实现元素进入/离开的过渡效果。
首先，让我们举个栗子：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://unpkg.com/animate.css@3.5.1/animate.min.css" rel="stylesheet" type="text/css">
<style>
.toggle-enter-active {
transition: all 3s ease;
height: 50px;
overflow: hidden;
}
.toggle-leave-active {
transition: all 3s ease;
height: 0px;
overflow: hidden;
}
.toggle-enter,
.toggle-leave {
height: 0;
opacity: 0;
}
</style>
</head> <body>
<div id="demo">
<button @click="show = !show">点击我</button>
<transition name="toggle">
<p v-if="show">我有一只小毛驴，我从来也不骑~~~</p>
</transition>
</div>
<script src='https://unpkg.com/vue'></script>
<script>
new Vue({
el: '#demo',
data: {
show: false,
}
})
</script>
</body> </html>
注意：
- transition标签内只能有name一个属性
- transition标签内只能有一个子元素（但此子元素内可以包含多个标签）且需要使用v-if或v-show来控制显示隐藏。
- transition的name属性规定了类名，例如我定义了name为toggle，则p标签对应的类名为：
toggle-enter 元素被插入时生效，在下一个帧移除
toggle-enter-active 元素被插入时生效，执行完transition/animation后移除
toggle-leave 元素被隐藏时生效，在下一个帧移除
toggle-leave-active 元素被隐藏时生效，执行完transition/animation后移除
vue2.0中transition组件的用法的更多相关文章
- vue2.0中父子组件之间的通信总结
父组件: 子组件: 接受父组件的信息: 向父组件发送事件: (其中slot是插槽,可以将父组件中的<p>123</p>插入进来,如果父组件没有插入的内容,则显示slot内部的内 ...
- Vue2.0中的transition组件
组件的过度 Vue1.0中transition做为标签的行内属性被vue支持.但在Vue2.0中.Vue放弃了旧属性的支持并提供了transition组件,transition做为标签被使用. 使用t ...
- 基于vue2.0的分页组件开发
今天安排的任务是写基于vue2.0的分页组件,好吧,我一开始是觉得超级简单的,但是越写越写不出来,写的最后乱七八糟的都不知道下句该写什么了,所以重新捋了思路,小结一下- 首先写组件需要考虑: 要从父组 ...
- Vue2.0的通用组件
饿了么基于Vue2.0的通用组件开发之路(分享会记录) Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库. ...
- vue2.0实现分页组件
最近使用vue2.0重构项目, 需要实现一个分页的表格, 没有找到合适的组件, 就自己写了一个, 效果如下: 该项目是使用 vue-cli搭建的, 如果你的项目中没有使用webpack,请根据代码自己 ...
- vue2.0 中#$emit,$on的使用详解
vue1.0中 vm.$dispatch 和 vm.$broadcast 被弃用,改用$emit,$on 1. vm.$on( event, callback ) 监听当前实例上的自定义事件.事件可以 ...
- Vue2.0中的路由配置
Vue2.0较Vue1.0,路由有了较大改变.看一下Vue2.0中的路由如何配置: 步骤一: 在main.js文件中引入相关模块以及组件及实例化vue对象配置选项路由及渲染App组件 默认设置如下: ...
- vue2.0 $emit $on组件通信
在vue1.0中父子组件通信使用$dispatch 和 $broadcast,但是在vue2.0中$dispatch 和 $broadcast 已经被弃用. 因为基于组件树结构的事件流方式实在是让人难 ...
- vue2.0中动画
#vue2.0中css动画不显示的坑: transition中包含的两个标签如果相同(此处都是p标签),需要为元素指定key.如果标签名不同的话,不指定key也可以出现动画效果. #vue2.0中js ...
随机推荐
- poj1511【最短路spfa】
题意: 计算从源点1到各点的最短路之和+各点到源点1的最短路之和: 思路: 源点这个好做啊,可是各点到源点,转个弯就是反向建边然后求一下源点到各点的最短路,就是各点到源点的最短路,在两幅图里搞: 贴一 ...
- hdoj1074【A的无比爆炸】
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊,一开始我就不知道怎么写,然后看了题解是状压DP,后来去看了看状压DP也就这样嘛,但是难点,可以说是不熟悉的地方吧...如下: 第一.我们能很快的知道状压DP的原理: ...
- 腾讯QQ团队开源分布式后台毫秒服务引擎全解析：引擎架构、RPC、灰度……
腾讯QQ团队将于12月4日开源一个服务开发运营框架,叫做毫秒服务引擎(Mass Service Engine in Cluster,MSEC),它集RPC.名字发现服务.负载均衡.业务监控.灰度发布. ...
- spring AOP excution表达式各符号意思
execution(*com.sample.service.impl..*.*(..)) 符号 含义 execution() 表达式的主题 第一个“*”符号 表示返回值的类型任意: com.sampl ...
- redis优势
redis是高性能的key-value内存数据库. 由于是内存型的,所以性能相比磁盘数据库更加优秀. 由于支持丰富的数据类型,相比memcache更受开发者欢迎.列表和整形是最常用的数据类型. 就算对 ...
- Little Elephant and Elections CodeForces - 258B
Little Elephant and Elections CodeForces - 258B 题意:给出m,在1-m中先找出一个数x,再在剩下数中找出6个不同的数y1,...,y6,使得y1到y6中 ...
- UVa 1218 Perfect Service 完美的服务
***状态设计值得一看dp[u][0]表示u是服务器(以下v均指任意u的子结点,son指u的所有子结点)ap[u][0]=sum{dp[v][1]}+1//错误,服务器是可以和其他服务器相邻的dp[u ...
- 1-10super和this关键字
什么是super? super代表的是当前子类对象中的父类型特征. 什么时候使用super? 子类和父类中都有某个数据,例如,子类和父类中都有name这个属性.如果要再子类中访问父类中的name属性, ...
- JAVA常用知识总结（二）
JAVA中的参数传递总结先看两道笔试题: public class Test2 { public static void main (String [] args) { StringBuffer a ...
- excel之实验数据处理线性拟合
实验前准备:设计表格项,通过设计公式,从而输入原始数据后直接得到最终的结果数据,学习常用的VBA公式及处理:Cn-$B$4,其中的$B$4表示绝对单元格位置;SUM(Xm:Yn)求范围内的和. 针对实 ...