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 中添加权限控制
前言 在一个项目中,一些功能会涉及到重要的数据管理,为了确保数据的安全,我们会在项目中加入权限来限制每个用户的操作.作为前端,我们要做的是配合后端给到的权限数据,做页面上的各种各样的限制. 需求 因为 ...
随机推荐
- react核心知识点高度总结
本文系统的将react的语法以最简练的方式列举出来 安装 写在前面 JSX 组件的定义 state 生命周期 方法 条件渲染 列表 表单 组合嵌套 扩展语法 context传递props 错误拦截 r ...
- 【SymmetricDS】SymmetricDS是如何工作的
2018-04-20 by 安静的下雪天 http://www.cnblogs.com/quiet-snowy-day/p/8890785.html 本文翻译自SymmetricDS官方文档 ...
- oracle——基础知识(二)未完
1.select 查询 单独的一条 select 语句 可以一次查询多条记录:但是在 pl/sql 块中,select语句只能 使用INTO子句:必须并且只能返回一行 2.EXECUTE IMMEDI ...
- Javascript面向对象(三):非构造函数的继承
这个系列的第一部分介绍了"封装",第二部分介绍了使用构造函数实现"继承". 今天是最后一个部分,介绍不使用构造函数实现"继承". 一.什么是 ...
- 巧用cssText属性
给一个HTML元素设置css属性,如 1 2 3 4 var head= document.getElementById("head"); head.style.width = & ...
- 下拉菜单控件JComboBox的使用
---------------siwuxie095 工程名:TestUI 包名:com.siwuxie095.ui 类名:TestList.ja ...
- final 子类禁止重写
<?php //子类中编写和父类中完全一样的函数,是对父类中的函数进行重写 class BaseClass{ public function test() { echo "BaseCl ...
- cakephp增删改查
增 $this->create(); $ret = $this->save($data); 删 $ret = $this->deleteAll(array('user_id'=> ...
- 去掉utf-8的Bom头:使用java以及jdbc不使用第三方库执行sql文件脚本
package com.xxx.xxx.dao; import java.io.BufferedReader; import java.io.File; import java.io.FileInpu ...
- Xamarin Mono for VS开发窗体标题(Title)乱码解决方案
利用mono for VS开发一个手机程序,结果只有窗体的标题 title部分是乱码,其他所有地方中文都显示正常,很郁闷.百度很久无果.最后发现只要在 VS菜单中 的 文件->高级保存选型中奖编 ...