vue中渐进过渡效果实现


Posted in Javascript onOctober 27, 2016

本文实例为大家分享了vue 渐进过渡效果,供大家参考,具体内容如下,供大家参考,具体内容如下

transition 与 v-for 一起用时可以创建渐近过渡。给过渡元素添加一个特性 stagger,enter-stagger 或 leave-stagger:

<div v-for="item in list" transition="stagger" stagger="100"></div>

或者,提供一个钩子 stagger, enter-stagger 或 leave-stagger,以更好的控制:

Vue.transition('stagger', {
 stagger: function (index) {
 // 每个过渡项目增加 50ms 延时
 // 但是最大延时限制为 300ms
 return Math.min(300, index * 50)
 }
})

示例:html代码:

<div id="demo">
 <input v-model="query">
 <ul>
  <li v-for="item in list | filterBy query"
   transition="staggered"
   stagger="100">
   {{item.msg}}
   </li>
 </ul>
</div>

js代码:

new Vue({
 el: '#demo',
 data: {
  query: '',
  list: [
   { msg: 'Bruce Lee' },
   { msg: 'Jackie Chan' },
   { msg: 'Chuck Norris' },
   { msg: 'Jet Li' },
   { msg: 'Kung Fury' }
  ]
 }
})

css代码:

ul {
 padding-left: 0;
 font-family: Helvetica, Arial, sans-serif;
}
.staggered-transition {
 transition: all .5s ease;
 overflow: hidden;
 margin: 0;
 height: 20px;
}
.staggered-enter, .staggered-leave {
 opacity: 0;
 height: 0;
}

效果如下图:

vue中渐进过渡效果实现

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

Javascript 相关文章推荐
JS获取IUSR_机器名和IWAM_机器名帐号的密码
Dec 06 Javascript
[原创]用javascript实现检测指定目录是否存在的方法
Jan 12 Javascript
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
Nov 14 Javascript
php中给js数组赋值方法
Mar 10 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
Aug 22 Javascript
ThinkJS中如何使用MongoDB的CURD操作
Dec 13 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
Mar 09 Javascript
Angular4开发解决跨域问题详解
Aug 28 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
Nov 01 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
May 27 Javascript
JSON获取属性值方法代码实例
Jun 30 Javascript
关于Node.js中频繁修改代码重启服务器的问题
Oct 15 Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
Oct 27 #Javascript
真正好用的js验证上传文件大小的简单方法
Oct 27 #Javascript
vue的props实现子组件随父组件一起变化
Oct 27 #Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
Oct 27 #Javascript
简单理解vue中Props属性
Oct 27 #Javascript
利用React-router+Webpack快速构建react程序
Oct 27 #Javascript
如何使用Vuex+Vue.js构建单页应用
Oct 27 #Javascript
You might like
win7下memCache的安装过程(具体操作步骤)
2013/06/28 PHP
php curl 上传文件代码实例
2015/04/27 PHP
javascript 选择文件夹对话框(web)
2009/07/07 Javascript
form表单只提交数据而不进行页面跳转的解决方案
2013/09/18 Javascript
了不起的node.js读书笔记之node的学习总结
2014/12/22 Javascript
Jquery attr()方法 属性赋值和属性获取详解
2016/04/15 Javascript
深入分析javascript中的错误处理机制
2016/07/17 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
2016/08/01 Javascript
jQuery自定义插件详解及实例代码
2016/12/29 Javascript
js编写简单的聊天室功能
2017/08/17 Javascript
微信通过页面(H5)直接打开本地app的解决方法
2017/09/09 Javascript
10种JavaScript最常见的错误(小结)
2019/06/21 Javascript
微信小程序后端(java)开发流程的详细步骤
2019/11/13 Javascript
js将URL网址转为16进制加密与解密函数
2020/03/04 Javascript
python脚本实现分析dns日志并对受访域名排行
2014/09/18 Python
python保存字符串到文件的方法
2015/07/01 Python
python实现人脸识别经典算法(一) 特征脸法
2018/03/13 Python
python实现汉诺塔算法
2021/03/01 Python
浅谈python标准库--functools.partial
2019/03/13 Python
使用Python webdriver图书馆抢座自动预约的正确方法
2021/03/04 Python
用HTML5实现手机摇一摇的功能的教程
2012/10/30 HTML / CSS
方太官方网上商城:销售方太抽油烟机、燃气灶、消毒柜等
2017/01/17 全球购物
美国知名女性服饰品牌:New York & Company
2017/03/23 全球购物
荷兰游戏商店:Allyouplay
2019/03/16 全球购物
护士专业推荐信
2013/11/02 职场文书
职业技术学校毕业生推荐信
2013/12/03 职场文书
车间统计员岗位职责
2014/01/05 职场文书
结婚邀请函范文
2014/01/14 职场文书
优秀家长事迹材料
2014/05/17 职场文书
2014年党员教师自我剖析材料
2014/09/30 职场文书
2014年销售经理工作总结
2014/12/01 职场文书
2015年技术工作总结范文
2015/04/20 职场文书
《去年的树》教学反思
2016/02/18 职场文书
2016年幼儿园教师师德承诺书
2016/03/25 职场文书
小米11和iphone12哪个值得买?小米11对比iphone12评测
2021/04/21 数码科技
Java9新特性之Module模块化编程示例演绎
2022/03/16 Java/Android