Vue中添加过渡效果
最近在学习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中添加过渡效果的更多相关文章
- vue中添加util公共方法&&ES6之import、export
vue中添加util公共方法&&ES6之import.export https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Re ...
- 在vue中添加sass的配置的方法
1.安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于 node-sass npm install --save-dev no ...
- vue中添加Echarts图表的使用,Echarts的学习笔记
项目中需要使用一些折线图.柱状图.饼状图等等,之前使用过heightCharts(关于heightCharts请看我的另一篇 http://www.cnblogs.com/jasonwang2y60/ ...
- vue中添加echarts
方法一:全局引入echarts 步骤: 1.全局安装 echarts依赖. cnpm install echarts -- save 2.引入echarts模块,在Vue项目的main. ...
- 在vue中添加ico图标
准备:添加 ico图标在与index.html同级的目录 第一种方法: 在index.html中引入: <link rel="shortcuticon" type=" ...
- Vue中添加新的路由并访问
1.搭建好Vue脚手架(这里使用的版本是Vue2.0) 2.在代码编辑器(这里使用的是Sublime Text)打开项目文件夹 3.在文件目录src中的component下创建一个新的vue页面,写入 ...
- vue中添加less配置,用于计算div高度
需求:左边垂直的菜单栏高度设置为 100% - 导航栏的高度(3.6rem) 首先,从vue-cli脚手架里的安装的webpack模板中并没有less的依赖配置,得自己手动添加安装 安装命令::npm ...
- vue中添加与删除,关键字搜索
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 如何优雅的在 vue 中添加权限控制
前言 在一个项目中,一些功能会涉及到重要的数据管理,为了确保数据的安全,我们会在项目中加入权限来限制每个用户的操作.作为前端,我们要做的是配合后端给到的权限数据,做页面上的各种各样的限制. 需求 因为 ...
随机推荐
- 实验吧CTF题库-密码学(部分)
这里没有key: 打开链接,有一个弹窗 然后就是一个空白网页,右键查看源代码 这里有一串js密文,解密一下,https://www.dheart.net/decode/index.php 得到flag ...
- CPU, PSU, SPU的区别
It all started in January 2005 with Critical Patch Updates (CPU). Then Patch Set Updates (PSU) were ...
- 在云服务器上体验Docker
1. 添加Docker repository key sh -c "wget -qO- https://get.docker.io/gpg | apt-key add -" 2. ...
- 修改Windows帐户密码,导致Sql Server 2000无法启动
修改Windows帐户密码,导致Sql Server 2000无法启动. --现象以管理员或同等权限用户登录 Windows XP,建立 Sql Server 2000 数据库.之后,在修改此 Win ...
- asp.net mysql 链接类
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Text;u ...
- Shell编程进阶 2.0 shell中断继续退出
break continue exit break 结束本次for循环 写个for循环脚本 vim for2.sh #!/bin/bash ## 5` do echo $i ] then b ...
- 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 ...
- eclipse怎么查看class文件(eclipse安装反编译插件)
本人eclipse版本: Eclipse Java EE IDE for Web Developers. Version: Mars.2 Release (4.5.2) 步骤1:下载两个我们需要的东西 ...
- java GC是在什么时候,对什么东西,做了什么事情?
1.新生代有一个Eden区和两个survivor区,首先将对象放入Eden区,如果空间不足就向其中的一个survivor区上放,如果仍然放不下就会引发一次发生在新生代的minor GC,将存活的对象放 ...
- python学习笔记(1)python下载及运行
进入https://www.python.org/官网下载python,根据需要选择2.*或3.*版本 安装完将安装目录添加到环境变量path中 运行cmd,输入python出现版本号即配置成功 下载 ...