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

首先，让我们举个栗子：

<!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. C#SuperSocket的搭建--通过配置启动

    之前我们借助一个SuperSocket实现了一个简易版的服务器, 但是不管是Server还是Session都是使用框架的,本篇博客我们要实现自己的Server和Session,来重写框架原生的Serv ...

  2. Ant Design Vue项目解析-前言

    源码系列文章很长时间没有更新,一是在考虑文章用什么方式写质量会更高,用什么方式总结更易于扩展和总结知识点,加上工作.看书.健身占用的时间比较多所以也没时间去整理.最近在网上看到一篇文章感觉这种方式不错 ...

  3. python slice 切片

    list,tuple,string,bytes对象可以进行切片处理,生成一个新的这些类的对象. 格式:li[start: stop: step] list切片: >>> li = [ ...

  4. HTML5中div，article，section的区别

    最近正在学习html5,刚接触html5,感觉有点不适应,因为有一些标签改变了,特别是div, section article这三个标签,查了一些资料,也试着用html5和css3布局网页,稍微有点头 ...

  5. POJ 1692 Crossed Matchings dp[][] 比较有意思的dp

    http://poj.org/problem?id=1692 这题看完题后就觉得我肯定不会的了,但是题解却很好理解.- - ,做题阴影吗 所以我还是需要多思考. 题目是给定两个数组,要求找出最大匹配数 ...

  6. C# 控制台如何播放音频文件

    OK,先看下代码: using System.Reflection; using System.Media; namespace ThePlay { class Program { static vo ...

  7. AJPFX谈JAVA新手问题之异常处理使用不当

    ★空的 catch 语句块 犯这种错误的人比较少,一般发生在刚学会 Java 或者刚参加工作不久的人身上. 所谓“空 catch 语句块”就是在 catch 语句块中没有对异常作任何处理(比如记错误日 ...

  8. Java并发——ThreadPoolExecutor线程池解析及Executor创建线程常见四种方式

    前言: 在刚学Java并发的时候基本上第一个demo都会写new Thread来创建线程.但是随着学的深入之后发现基本上都是使用线程池来直接获取线程.那么为什么会有这样的情况发生呢? new Thre ...

  9. [ POI 2017 ] Sabota?

    Description 题目链接 Solution 因为一个节点染黑了子树就都被染黑了,所以最后染黑的点集必然是一棵子树. 可以得出的结论是,如果被染黑的节点在节点 \(a\) 的子树中,而 \(a\ ...

  10. 关于setTimeout和Promise执行顺序问题

    先看一段代码 console.log('打印'+1); setTimeout(function(){ console.log('打印'+2); }) new Promise(function(reso ...