详解Vue中添加过渡效果


Posted in Javascript onMarch 20, 2017

最近在学习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中添加过渡效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
统计出现最多的字符次数的js代码
Dec 03 Javascript
jQuery代码优化之基本事件
Nov 01 Javascript
Javascript实现飞动广告效果的方法
May 25 Javascript
深入浅析Node.js 事件循环
Dec 20 Javascript
bootstrap使用validate实现简单校验功能
Dec 02 Javascript
如何学JavaScript?前辈的经验之谈
Dec 28 Javascript
canvas学习之API整理笔记(一)
Dec 29 Javascript
js随机生成一个验证码
Jun 01 Javascript
Angular实现表单验证功能
Nov 13 Javascript
实例分析vue循环列表动态数据的处理方法
Sep 28 Javascript
详解Vue 换肤方案验证
Aug 28 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
Oct 21 Javascript
JS模拟实现ECMAScript5新增的数组方法
Mar 20 #Javascript
JavaScript 过滤关键字
Mar 20 #Javascript
Extjs表单输入框异步校验的插件实现方法
Mar 20 #Javascript
js实现鼠标拖动功能
Mar 20 #Javascript
基于vue2的table分页组件实现方法
Mar 20 #Javascript
详解Weex基于Vue2.0开发模板搭建
Mar 20 #Javascript
基于vue.js实现侧边菜单栏
Mar 20 #Javascript
You might like
YB217、YB235、YB400浅听
2021/03/02 无线电
php生成xml简单实例代码
2009/12/16 PHP
PHP简单判断iPhone、iPad、Android及PC设备的方法
2016/10/11 PHP
jcrop基本参数一览
2013/07/16 Javascript
JavaScript函数的调用以及参数传递
2015/10/21 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
2016/05/12 Javascript
使用RequireJS库加载JavaScript模块的实例教程
2016/06/06 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
2016/07/07 Javascript
js仿腾讯QQ的web登陆界面
2016/08/19 Javascript
微信小程序 教程之事件
2016/10/18 Javascript
原生js实现旋转木马轮播图效果
2017/02/27 Javascript
Vue 2.X的状态管理vuex记录详解
2017/03/23 Javascript
基于jQuery的左滑出现删除按钮的示例
2017/08/29 jQuery
vue axios同步请求解决方案
2017/09/29 Javascript
在vscode中统一vue编码风格的方法
2018/02/22 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
2018/09/06 Javascript
Vue数据双向绑定的深入探究
2018/11/27 Javascript
重学JS 系列:聊聊继承(推荐)
2019/04/11 Javascript
[51:36]EG vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
介绍Python的Django框架中的静态资源管理器django-pipeline
2015/04/25 Python
Python中使用hashlib模块处理算法的教程
2015/04/28 Python
Python实现的朴素贝叶斯算法经典示例【测试可用】
2018/06/13 Python
python实现两个经纬度点之间的距离和方位角的方法
2019/07/05 Python
tensorflow入门:TFRecordDataset变长数据的batch读取详解
2020/01/20 Python
python shapely.geometry.polygon任意两个四边形的IOU计算实例
2020/04/12 Python
Python实现代码块儿折叠
2020/04/15 Python
介绍一下游标
2012/01/10 面试题
Why we need EJB
2016/10/20 面试题
企业管理部经理岗位职责
2013/12/24 职场文书
畜牧兽医本科生的自我评价
2014/03/03 职场文书
大学生党员承诺书
2014/05/20 职场文书
四风批评与自我批评发言稿
2014/10/14 职场文书
事业单位聘任报告
2015/03/02 职场文书
golang 如何通过反射创建新对象
2021/04/28 Golang
mysql定时自动备份数据库的方法步骤
2021/07/07 MySQL
python中pd.cut()与pd.qcut()的对比及示例
2022/06/16 Python