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

首先，让我们举个栗子：

<!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. 深度解密Go语言之 map

    目录 什么是 map 为什么要用 map map 的底层如何实现 map 内存模型 创建 map 哈希函数 key 定位过程 map 的两种 get 操作 如何进行扩容 map 的遍历 map 的赋值 ...

  2. POJ2796【单调栈】

    题意: 题意:n个数,求某段区间的最小值*该段区间所有元素之和的最大值 思路: 主要参考:http://www.cnblogs.com/ziyi–caolu/archive/2013/06/23/31 ...

  3. POJ3186【区间DP】

    题意: 每次只能取两端,然后第 i 次取要val[ i ]*i,求一个最大值 一切都是错觉[读者省略此段] 这道题目一开始想的就是记忆化搜索,然后太天真了?好像是,一开始用一维dp[ i ]直接代表一 ...

  4. NOIp2005 过河【dp+离散化】By cellur925

    题目传送门 $30pts$ 状态和转移都比较好想:设$f[i]$表示跳到$i$位置,踩到的最小石子数.转移方程也很明了,为$f[i]$=$min${$f[i-j]$),,这个位置有石子时答案再加1,$ ...

  5. SpringBoot自定义参数解析器

    一.背景 平常经常用 @RequestParam注解来获取参数,然后想到我能不能写个自己注解获取请求的ip地址呢?就像这样 @IP String ip 二.分析 于是开始分析 @RequestPara ...

  6. python之条件判断、循环和字符串格式化

    1. python的条件判断:if和else 在条件判断中可以使用算数运算符 等于:== 不等于:!= 大于:> 小于:< 大于等于:>= 小于等于:<= 示例1: usern ...

  7. c#学习系列之装箱拆箱

    1.      装箱和拆箱是一个抽象的概念 2.      装箱是将值类型转换为引用类型 :拆箱是将引用类型转换为值类型       利用装箱和拆箱功能,可通过允许值类型的任何值与Object 类型的 ...

  8. 生产环境中配置的samba

    实验需求: 由于实验室纳新一帮新孩子,搭建samba主要是临时共享一些学习资源的,基本上大家用的都是windows.而且这个服务可以让他们在校园的里的个个角落都可以访问到,所以给挂了学校的公网,不过我 ...

  9. SAMBA服务初学练习

    服务概述 Samba最先在Linux和Windows之间架起了一座桥梁,正是由于Samba的出现,我们可以在Linux和Windows之间实现文件共享的相互通讯,我们可以将其架设成一个功能非常强大的文 ...

  10. solr 常见异常

    solr4.3本地数据提交异常分析 (2013-06-19 16:03:15) 转载▼   异常一. Exception in thread "main" java.lang.No ...