详解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 相关文章推荐
javascript的对话框详解与参数
Mar 08 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
Nov 28 Javascript
Sublime Text 3常用插件及安装方法
Dec 16 Javascript
Angularjs整合微信UI(weui)
Mar 15 Javascript
原生js代码实现图片放大境效果
Oct 30 Javascript
Bootstrap缩略图的创建方法
Mar 22 Javascript
vue-cli webpack2项目打包优化分享
Feb 07 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
Oct 09 Javascript
vue如何截取字符串
May 06 Javascript
如何基于JS截获动态代码
Dec 25 Javascript
VUE中使用HTTP库Axios方法详解
Feb 05 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
Aug 08 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
PHP explode()函数的几个应用和implode()函数有什么区别
2015/11/05 PHP
PHP实现数组array转换成xml的方法
2016/07/19 PHP
PHP使用new StdClass()创建空对象的方法分析
2017/06/06 PHP
工作中常用到的JS表单验证代码(包括例子)
2010/11/11 Javascript
一个关于javascript匿名函数的问题分析
2012/03/30 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
2013/08/29 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
2014/04/02 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
2015/01/20 Javascript
javascript转换日期字符串为Date日期对象的方法
2015/02/13 Javascript
了解Javascript的模块化开发
2015/03/02 Javascript
Vue.js每天必学之组件与组件间的通信
2016/09/08 Javascript
原生js开发的日历插件
2017/02/04 Javascript
js实现移动端微信页面禁止字体放大
2017/02/16 Javascript
js上下视差滚动简单实现代码
2017/03/07 Javascript
Vue2.x中的父子组件相互通信的实现方法
2017/05/02 Javascript
element ui table(表格)实现点击一行展开功能
2018/12/04 Javascript
NodeJs之word文件生成与解析的实现代码
2019/04/01 NodeJs
JavaScript常用进制转换及位运算实例解析
2020/10/14 Javascript
[42:25]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第三场
2018/04/06 DOTA
python创建临时文件夹的方法
2015/07/06 Python
Python实现通过文件路径获取文件hash值的方法
2017/04/29 Python
python使用sessions模拟登录淘宝的方式
2019/08/16 Python
基于YUV 数据格式详解及python实现方式
2019/12/09 Python
如何给Python代码进行加密
2020/01/10 Python
Django框架配置mysql数据库实现过程
2020/04/22 Python
New Balance英国官方网站:始于1906年,百年慢跑品牌
2016/12/07 全球购物
微软中国官方旗舰店:销售Surface、Xbox One、笔记本电脑、Office
2018/07/23 全球购物
小区门卫值班制度
2014/01/24 职场文书
政风行风建设整改方案
2014/10/27 职场文书
教师工作总结范文2014
2014/11/10 职场文书
2015年度党风廉政建设工作情况汇报
2015/01/02 职场文书
2015年学校德育工作总结
2015/04/22 职场文书
一定要知道的 25 个 Vue 技巧
2021/11/02 Vue.js
python程序的组织结构详解
2021/12/06 Python
一条慢SQL语句引发的改造之路
2022/03/16 MySQL
zabbix配置nginx监控的实现
2022/05/25 Servers