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

首先，让我们举个栗子：

<!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. android调用第三方库——第一篇 (转载)

    转自:http://blog.csdn.net/jiuyueguang/article/details/9447245 版权声明:本文为博主原创文章,未经博主允许不得转载. 0:前言: 这两天一直在研 ...

  2. asp.net实现服务器文件下载到本地

    1.说明 通过文件下载框实现将服务器上的文件下载到本地指定位置.这里需要指定服务器文件路径 try { string strFilePath = Server.MapPath("~" ...

  3. postman接口测试系列： 时间戳和加密

    在使用postman进行接口测试的时候,对于有些接口字段需要时间戳加密,这个时候我们就遇到2个问题,其一是接口中的时间戳如何得到?其二就是对于现在常用的md5加密操作如何在postman中使用代码实现 ...

  4. $P2872\ [USACO07DEC]道路建设Building\ Roads$

    \(problem\) 错的原因是\(RE\)(大雾 , 时刻谨记 \(N\) 个地方的话 保守开 \(\frac{N^2}{2}\) 大小. 因为是边. 边最多的情况即完全图 : $1+2+3+4. ...

  5. Query on a tree IV SPOJ - QTREE4

    https://vjudge.net/problem/SPOJ-QTREE4 点分就没有一道不卡常的? 卡常记录: 1.把multiset换成手写的带删除堆(套用pq)(作用很大) 2.把带删除堆里面 ...

  6. cordova 安卓项目打包 release安装包

    问题描述: 打包安卓项目, 如果是在项目中只是使用debug包的话, 其中的签名方式使用的都是cordova框架本身, 那么每次打包的话, 都会把之前的安装包给覆盖掉. 现在打包做出一个release ...

  7. NTP服务简介

    定义:NTP全称为Network Time Protocol,即网络时间协议.是用来使计算机时间同步的一种协议.它可以使计算机对服务器或时钟源做同步,可以提供高精度的时间校正(LAN 上与标准时间小于 ...

  8. Solr打分排序规则自定义【转】

    在搭建好solrCloud搜索集群后,通过编写基本的查询显示语句已经能够通过输入关键字查询到相应结果进行显示,但是在显示结果排序上以及不相关信息过滤问题上,如何制定合理的打分规则得到理想的结果集确实比 ...

  9. Linux上不了网——wget无法解析主机

    很有可能是网关和域名服务器没有设置 1.设置网关 netstat -rn #查看网关配置情况 [hadoop@slave1 ~]$ route -n Kernel IP routing table D ...

  10. Java 设置Word页面背景色

    Word中可以针对不同文档排版设计要求来设置背景设置颜色.常见的可设置单一颜色.渐变色或加载指定图片来设置成背景.下面通过Java来设置以上3种Word页面背景色. 使用工具:Spire.Doc fo ...