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 ...
随机推荐
- （水题）洛谷 - P1603 - 斯诺登的密码
https://www.luogu.org/problemnew/show/P1603 有毒,大小写不检测,句号也不管. #include<bits/stdc++.h> using nam ...
- hdoj1007【几何】【未完待续】
题意: 在一个平面上有n(1e5)个点,然后求一个圆来包住这些点,求这个圆的最小半径. 思考: 要使一个圆直接包了这些点,没有任何思路..
- thinkphp整合swoole
cli模式下执行thinkphp1.cd 项目根目录2.php index.php admin/index/index --执行 模块/控制器/方法名 异步消息队列1.服务器端核心代码 /** * 脚 ...
- LuoguP1268树的重量【构造/思维】By cellur925
题目传送门 Description 给你一个矩阵$M$,$M(i,j)$表示$i$到$j$的最短距离.定义树的重量为树上各边权之和,对于任意给出的合法矩阵$M$,已知它所能表示树的重量是唯一确定的.给 ...
- mysql 用 group by 和 order by同时使用
首先,这是不可能实现的 mysql的查询的顺序 select -> from-> where->group by->having->order by. 但mysql的解析 ...
- @ConfigurationProperties和@EnableConfigurationProperties配合使用
https://blog.csdn.net/u010502101/article/details/78758330 @ConfigurationProperties注解主要用来把properties配 ...
- Dima and Magic Guitar CodeForces - 366E
Dima and Magic Guitar CodeForces - 366E 题意: http://blog.csdn.net/u011026968/article/details/38716425 ...
- ImageView加载长图（适用不需要缩放的情况）
此案例适用于加载网络长图且图片的宽和高已知的情况.由于ImageView加载图片有一个4096*4096的限制,所以对于巨长图的加载比较麻烦,需要我们自己去手动处理. 有两种解决方案:第一种就是比较l ...
- PropTypes 和组件参数验证
我们来了到了一个非常尴尬的章节,很多初学的朋友可能对这一章的知识点不屑一顾,觉得用不用对程序功能也没什么影响.但其实这一章节的知识在你构建多人协作.大型的应用程序的时候也是非常重要的,不可忽视. 都说 ...
- oracle PL、SQL（二）
oracle PL.SQL(基础知识点二) --1,参数 in:表示输入类型,可以省略 :out:输出类型不能省略---------- ----案例1:编写一个过程,可以输入雇员的编号,返回该雇员的姓 ...