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 ...
随机推荐
- 洛谷 - P1309 - 瑞士轮 - 归并排序
https://www.luogu.org/problemnew/show/P1309 一开始写的直接快排没想到真的TLE了. 想到每次比赛每个人前移的量不会很多,但是不知从哪里开始优化. 搜索一下原 ...
- IT兄弟连 JavaWeb教程 重定向
HTTP协议规定了一种重定向机制,重定向的运作流程如下: ● 用户在浏览器端输入特定URL,请求访问服务器端的某个组件. ● 服务器端的组件返回一个状态码为302的响应结果,该响应结果的含义为: ...
- Luogu P3946 ことりのおやつ（小鸟的点心） 【最短路】By cellur925
题目传送门 日本的冬天经常下雪.不幸的是,今天也是这样,每秒钟雪的厚度会增加q毫米. 秋叶原共有n个地点,编号从1到n.每个地点在开始的时候的积雪高度为hi. 有m条双向道路连接这些地点,它们的长度分 ...
- 2019 年 Vue 学习路线图！
如果你是 Vue 开发新手,可能已经听过很多行话术语,比如单页面应用程序.异步组件.服务器端渲染,等等.你可能还听说过与 Vue 有关的一些工具和库,比如 Vuex.Webpack.Vue CLI 和 ...
- 51Nod 1649 齐头并进
#include <iostream> #include <algorithm> #include <cstring> //两遍迪杰斯特拉 #define INF ...
- 继续(3n+1)猜想 (25)
#include <algorithm> #include <iostream> using namespace std; int main(){ ] = { }; ], nu ...
- hdu 3367 Pseudoforest 最大生成树★
#include <cstdio> #include <cstring> #include <vector> #include <algorithm> ...
- FZu Problem 2236 第十四个目标 (线段树 + dp)
题目链接: FZu Problem 2236 第十四个目标 题目描述: 给出一个n个数的序列,问这个序列内严格递增序列有多少个?不要求连续 解题思路: 又遇到了用线段树来优化dp的题目,线段树节点里 ...
- [WOJ1583]向右看齐
题目链接: WOJ1583 题目分析: 大水题--我就来水个题解 倒序扫,单调栈维护单减序列,每个对象的答案是栈里它下面那个元素 代码: #include<bits/stdc++.h> # ...
- AIDL(1)：简介
Android 接口定义语言 (AIDL) 1.AIDL是什么 AIDL(Android 接口定义语言)与您可能使用过的其他 IDL 类似. 您可以利用它定义客户端与服务使用进程间通信 (IPC) 进 ...