详解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 相关文章推荐
javascipt匹配单行和多行注释的正则表达式
Nov 20 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
Jun 24 Javascript
Javascript实现禁止输入中文或英文的例子
Dec 09 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
Mar 13 Javascript
jquery实现的伪分页效果代码
Oct 29 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
Feb 21 Javascript
微信小程序入门教程
Nov 18 Javascript
protractor的安装与基本使用教程
Jul 07 Javascript
用JS实现简单的登录验证功能
Jul 28 Javascript
JS实现的文字间歇循环滚动效果完整示例
Feb 13 Javascript
微信小程序实现红包功能(后端PHP实现逻辑)
Jul 11 Javascript
vue中的watch监听数据变化及watch中各属性的详解
Sep 11 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环境套包 dedeampz 伪静态设置示例
2014/03/26 PHP
php函数重载的替代方法--伪重载详解
2015/05/08 PHP
PHP 枚举类型的管理与设计知识点总结
2020/02/13 PHP
JScript内置对象Array中元素的删除方法
2007/03/08 Javascript
js日期时间补零的小例子
2013/03/05 Javascript
javascript放大镜效果的简单实现
2013/12/09 Javascript
AngularJS中的Directive自定义一个表格
2016/01/25 Javascript
jQuery实现复制到粘贴板功能
2017/02/11 Javascript
vue实现消息的无缝滚动效果的示例代码
2017/12/05 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
2018/02/03 Javascript
简化vuex的状态管理方案的方法
2018/06/02 Javascript
微信小程序实现笑脸评分功能
2018/11/03 Javascript
如何在基于vue-cli的项目自定义打包环境
2018/11/10 Javascript
Javascript删除数组里的某个元素
2019/02/28 Javascript
在Layui中实现开关按钮的效果实例
2019/09/29 Javascript
JavaScript async/await原理及实例解析
2020/12/02 Javascript
在Python的Django框架中获取单个对象数据的简单方法
2015/07/17 Python
详解Python使用simplejson模块解析JSON的方法
2016/03/24 Python
在python中实现将一张图片剪切成四份的方法
2018/12/05 Python
在python 中实现运行多条shell命令
2019/01/07 Python
pandas 数据结构之Series的使用方法
2019/06/21 Python
Python变量访问权限控制详解
2019/06/29 Python
详解pandas数据合并与重塑(pd.concat篇)
2019/07/09 Python
将python安装信息加入注册表的示例
2019/11/20 Python
使用pyshp包进行shapefile文件修改的例子
2019/12/06 Python
python实现tail -f 功能
2020/01/17 Python
Python转换字典成为对象,可以用&quot;.&quot;方式访问对象属性实例
2020/05/11 Python
python 基于opencv去除图片阴影
2021/01/26 Python
Linux如何命名文件--使用文件名时应注意
2012/01/22 面试题
信息技术培训感言
2014/03/06 职场文书
2014年医院工作总结
2014/11/20 职场文书
2014年文明创建工作总结
2014/11/25 职场文书
驳回起诉民事裁定书
2015/05/19 职场文书
详解TS数字分隔符和更严格的类属性检查
2021/05/06 Javascript
手把手教你怎么用Python实现zip文件密码的破解
2021/05/27 Python
Python Flask搭建yolov3目标检测系统详解流程
2021/11/07 Python