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 ...
随机推荐
- .net 下webservice 的WebMethod的属性
WebMethod有6个属性: .Description .EnableSession .MessageName .TransactionOption .CacheDuration .BufferRe ...
- python __builtins__ reversed类 （58）
58.'reversed', 返回一个反转的迭代器. class reversed(object) | reversed(sequence) -> reverse iterator over ...
- 鸟哥私房菜基础篇：vim 程序编辑器习题
猫宁!!! 参考链接:http://cn.linux.vbird.org/linux_basic/0310vi.php 鸟哥是为中国信息技术发展做出巨大贡献的人. 1-我用 vi 开启某个档案后,要在 ...
- VMware安装Centos 7，网络连接问题以及解决方案
转自: https://www.cnblogs.com/owaowa/p/6123902.html 在这里表示万分感谢 在使用CentOS虚拟机后,出现了无法上网的情况,使用主机ping虚机地址可以p ...
- php 获得上周数据
$lastMondy = date('Y-m-d', strtotime('-2 sunday +1 days', time()));$lastSundy = date('Y-m-d', strtot ...
- the little schemer 笔记(9)
第九章 ...and Again, and Again, and, Again, ... 你想来点鱼子酱吗? 那就去找它吧. (looking a lat)是什么,其中a是 caviar, lat是( ...
- Brush (III) LightOJ - 1017
Brush (III) LightOJ - 1017 题意:有一些点,每刷一次可以将纵坐标在区间(y1,y1+w)范围内的所有点刷光,y1为任何实数.最多能刷k次,求最多共能刷掉几个点. 先将点按照纵 ...
- Linux下mysql新建账号及权限设置各种方式总结
来自:http://justcoding.iteye.com/blog/1941116 1.权限赋予 说明:mysql部署在服务器A上,内网上主机B通过客户端工具连接服务器A以进行数据库操作,需要服务 ...
- 123 Best Time to Buy and Sell Stock III 买卖股票的最佳时机 III
假设你有一个数组,它的第 i 个元素是一支给定的股票在第 i 天的价格.设计一个算法来找到最大的利润.你最多可以完成两笔交易.注意:你不可同时参与多笔交易(你必须在再次购买前出售掉之前的股票).详见: ...
- pyton 基础，运算符及字符类型。
一.python运算符: 二.数据类型: 1.数字: int :整型 32位机器上一个整数取值范围为-2**31~2**31-1即-2147483648~2147483647 64位机器上一个整数取 ...