作用：实现元素进入/离开的过渡效果。

首先，让我们举个栗子：

<!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>

注意：

  1. transition标签内只能有name一个属性
  2. transition标签内只能有一个子元素（但此子元素内可以包含多个标签）且需要使用v-if或v-show来控制显示隐藏。
  3. transition的name属性规定了类名，例如我定义了name为toggle，则p标签对应的类名为：

toggle-enter 元素被插入时生效，在下一个帧移除

toggle-enter-active  元素被插入时生效，执行完transition/animation后移除

toggle-leave 元素被隐藏时生效，在下一个帧移除

toggle-leave-active  元素被隐藏时生效，执行完transition/animation后移除

　　　　

vue2.0中transition组件的用法的更多相关文章

  1. vue2.0中父子组件之间的通信总结

    父组件: 子组件: 接受父组件的信息: 向父组件发送事件: (其中slot是插槽,可以将父组件中的<p>123</p>插入进来,如果父组件没有插入的内容,则显示slot内部的内 ...

  2. Vue2.0中的transition组件

    组件的过度 Vue1.0中transition做为标签的行内属性被vue支持.但在Vue2.0中.Vue放弃了旧属性的支持并提供了transition组件,transition做为标签被使用. 使用t ...

  3. 基于vue2.0的分页组件开发

    今天安排的任务是写基于vue2.0的分页组件,好吧,我一开始是觉得超级简单的,但是越写越写不出来,写的最后乱七八糟的都不知道下句该写什么了,所以重新捋了思路,小结一下- 首先写组件需要考虑: 要从父组 ...

  4. Vue2.0的通用组件

    饿了么基于Vue2.0的通用组件开发之路(分享会记录)   Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库. ...

  5. vue2.0实现分页组件

    最近使用vue2.0重构项目, 需要实现一个分页的表格, 没有找到合适的组件, 就自己写了一个, 效果如下: 该项目是使用 vue-cli搭建的, 如果你的项目中没有使用webpack,请根据代码自己 ...

  6. vue2.0 中#$emit,$on的使用详解

    vue1.0中 vm.$dispatch 和 vm.$broadcast 被弃用,改用$emit,$on 1. vm.$on( event, callback ) 监听当前实例上的自定义事件.事件可以 ...

  7. Vue2.0中的路由配置

    Vue2.0较Vue1.0,路由有了较大改变.看一下Vue2.0中的路由如何配置: 步骤一: 在main.js文件中引入相关模块以及组件及实例化vue对象配置选项路由及渲染App组件 默认设置如下: ...

  8. vue2.0 $emit $on组件通信

    在vue1.0中父子组件通信使用$dispatch 和 $broadcast,但是在vue2.0中$dispatch 和 $broadcast 已经被弃用. 因为基于组件树结构的事件流方式实在是让人难 ...

  9. vue2.0中动画

    #vue2.0中css动画不显示的坑: transition中包含的两个标签如果相同(此处都是p标签),需要为元素指定key.如果标签名不同的话,不指定key也可以出现动画效果. #vue2.0中js ...

随机推荐

  1. hdoj1272【并查集】

    因为是第二遍,所以题目也没怎么看,然后一开始的思路就是如果每次输入两个点的时候判断是不是同一个集合,如果同一个就是No,然后就wa了,想想也是,然后瞄了一下题解,还要判连通-真是蠢死了-多个集合都想不 ...

  2. Unity3D将来时：IL2CPP（上）

    http://inpla.net/thread-8197-1-1.html Unity3D将来时:IL2CPP(上) (注:本文详细的讲述了C#,Mono,.Net, IL等Unity使用到的概念,如 ...

  3. bzoj 4161 Shlw loves matrixI【常系数线性齐次递推】

    并不会递推,不过板子挺好背的,只要是类似的递推都能用,但是注意c数组不能使负数 如果除了递推还有常数项的话,就用f[i]-f[i-1]的方式消掉常数项(然后多一个f[i-1]的项) #include& ...

  4. （六）SpringBoot整合Swagger2框架

    一:什么是Swagger Swagger是一款通过我们添加的注解来对方法进行说明,来自动生成项目的在线api接口文档的web服务. 二:添加Swagger2依赖 <dependency> ...

  5. BFS 2015百度之星初赛2 HDOJ 5254 棋盘占领

    题目传送门 /* BFS:先把1的入队,每个1和它相邻的组合后看看能不能使0变1,若有则添加入队,change函数返回改变了多少个0 注意:结果还要加上原来占领的 */ #include <cs ...

  6. RHEL 6.5----haproxy实现负载均衡

    主机名 IP master 192.168.30.130 node-1 192.168.30.131 node-2 192.168.30.132 在master上安装 [root@master ~]# ...

  7. 关于发布WP 8.1应用信息不匹配问题的解决办法

    错误提示:   与此更新关联的程序包标识符与已上传程序包中的标识符不匹配: The package identity associated with this update doesn't match ...

  8. 死磕 java并发包之AtomicInteger源码分析

    问题 (1)什么是原子操作? (2)原子操作和数据库的ACID有啥关系? (3)AtomicInteger是怎么实现原子操作的? (4)AtomicInteger是有什么缺点? 简介 AtomicIn ...

  9. 【学习笔记】C++ cout 输出小数点后指定位数

    在C中我们可以使用 printf("%.2lf",a);但在C++中是没有格式操作符的,该如何操作: C++使用setprecision()函数,同时必须包含头文件iomanip, ...

  10. 【HEVC帧间预测论文】P1.5 Fast Coding Unit Size Selection for HEVC based on Bayesian Decision Rule

    Fast Coding Unit Size Selection for HEVC based on Bayesian Decision Rule <HEVC标准介绍.HEVC帧间预测论文笔记&g ...