最近在学习Vue这个框架,发现新的版本中,官网的文档里面说的过渡效果,如果直接粘贴官方的例子中的代码,发现并没有过渡的效果,经过反复测试之后终于知道怎么搞了,把测试的过程总结一下,以便以后回顾。

贴上成功的代码:

html:
<div v-if="show" :transition="expand">hello</div>
或者
<div v-if="show" v-bind:transition="expand">hello</div>
css:
/* 必需 */
.expand-transition {
transition: all .3s ease;
height: 30px;
padding: 10px;
background-color: #eee;
overflow: hidden;
} /* .expand-enter 定义进入的开始状态 */
/* .expand-leave 定义离开的结束状态 */
.expand-enter, .expand-leave {
height: 0;
padding: 0 10px;
opacity: 0;
}
js:
new Vue({
el: '#app',
data: {
show: false,
transitionName: 'expand'
}
})

点击查看效果

Vue中添加过渡效果的更多相关文章

  1. vue中添加util公共方法&&ES6之import、export

    vue中添加util公共方法&&ES6之import.export https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Re ...

  2. 在vue中添加sass的配置的方法

    1.安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于 node-sass npm install --save-dev no ...

  3. vue中添加Echarts图表的使用,Echarts的学习笔记

    项目中需要使用一些折线图.柱状图.饼状图等等,之前使用过heightCharts(关于heightCharts请看我的另一篇 http://www.cnblogs.com/jasonwang2y60/ ...

  4. vue中添加echarts

    方法一:全局引入echarts 步骤: 1.全局安装 echarts依赖.        cnpm install echarts -- save 2.引入echarts模块,在Vue项目的main. ...

  5. 在vue中添加ico图标

    准备:添加 ico图标在与index.html同级的目录 第一种方法: 在index.html中引入: <link rel="shortcuticon" type=" ...

  6. Vue中添加新的路由并访问

    1.搭建好Vue脚手架(这里使用的版本是Vue2.0) 2.在代码编辑器(这里使用的是Sublime Text)打开项目文件夹 3.在文件目录src中的component下创建一个新的vue页面,写入 ...

  7. vue中添加less配置,用于计算div高度

    需求:左边垂直的菜单栏高度设置为 100% - 导航栏的高度(3.6rem) 首先,从vue-cli脚手架里的安装的webpack模板中并没有less的依赖配置,得自己手动添加安装 安装命令::npm ...

  8. vue中添加与删除,关键字搜索

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 如何优雅的在 vue 中添加权限控制

    前言 在一个项目中,一些功能会涉及到重要的数据管理,为了确保数据的安全,我们会在项目中加入权限来限制每个用户的操作.作为前端,我们要做的是配合后端给到的权限数据,做页面上的各种各样的限制. 需求 因为 ...

随机推荐

  1. 实验吧CTF题库-密码学(部分)

    这里没有key: 打开链接,有一个弹窗 然后就是一个空白网页,右键查看源代码 这里有一串js密文,解密一下,https://www.dheart.net/decode/index.php 得到flag ...

  2. CPU, PSU, SPU的区别

    It all started in January 2005 with Critical Patch Updates (CPU).  Then Patch Set Updates (PSU) were ...

  3. 在云服务器上体验Docker

    1. 添加Docker repository key sh -c "wget -qO- https://get.docker.io/gpg | apt-key add -" 2. ...

  4. 修改Windows帐户密码,导致Sql Server 2000无法启动

    修改Windows帐户密码,导致Sql Server 2000无法启动. --现象以管理员或同等权限用户登录 Windows XP,建立 Sql Server 2000 数据库.之后,在修改此 Win ...

  5. asp.net mysql 链接类

    using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Text;u ...

  6. Shell编程进阶 2.0 shell中断继续退出

    break    continue   exit break 结束本次for循环 写个for循环脚本 vim for2.sh #!/bin/bash ## 5` do echo $i ] then b ...

  7. jxl.read.biff.BiffException: Unable to recognize OLE stream异常

    java代码读取excel文件时报: jxl.read.biff.BiffException: Unable to recognize OLE stream    at jxl.read.biff.C ...

  8. eclipse怎么查看class文件(eclipse安装反编译插件)

    本人eclipse版本: Eclipse Java EE IDE for Web Developers. Version: Mars.2 Release (4.5.2) 步骤1:下载两个我们需要的东西 ...

  9. java GC是在什么时候,对什么东西,做了什么事情?

    1.新生代有一个Eden区和两个survivor区,首先将对象放入Eden区,如果空间不足就向其中的一个survivor区上放,如果仍然放不下就会引发一次发生在新生代的minor GC,将存活的对象放 ...

  10. python学习笔记(1)python下载及运行

    进入https://www.python.org/官网下载python,根据需要选择2.*或3.*版本 安装完将安装目录添加到环境变量path中 运行cmd,输入python出现版本号即配置成功 下载 ...