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 相关文章推荐
JavaScript入门教程(10) 认识其他对象
Jan 31 Javascript
JQuery文本框高亮显示插件代码
Apr 02 Javascript
js实现的仿新浪微博完美的时间组件升级版
Dec 20 Javascript
Javascript实现div层渐隐效果的方法
May 30 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
Jun 10 Javascript
20分钟打造属于你的Bootstrap站点
Jul 27 Javascript
JS实现微信弹出搜索框 多条件查询功能
Dec 13 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
Vue引入sass并配置全局变量的方法
Jun 27 Javascript
element-ui 中使用upload多文件上传只请求一次接口
Jul 19 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
Sep 12 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
网页游戏开发入门教程三(简单程序应用)
2009/11/02 PHP
PHP实现上一篇下一篇的方法实例总结
2016/09/22 PHP
PHP容器类的两种实现方式示例
2019/07/24 PHP
理解JavaScript中的对象 推荐
2011/01/09 Javascript
ASP.NET中基于JQUERY的高性能的TreeView补充
2011/02/23 Javascript
js 判断一个元素是否在页面中存在
2012/12/27 Javascript
JavaScript将Table导出到Excel实现思路及代码
2013/03/13 Javascript
cookie.js 加载顺序问题怎么才有效
2013/07/31 Javascript
与Math.pow 相反的函数使用介绍
2014/08/04 Javascript
jQuery中ready事件用法实例
2015/01/19 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
2015/07/29 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
2015/12/09 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
2016/01/28 Javascript
AngularJS自定义控件实例详解
2016/12/13 Javascript
利用jquery禁止外层滚动条的滚动
2017/01/05 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
关于使用js算总价的问题
2017/06/23 Javascript
JavaScript中立即执行函数实例详解
2017/11/04 Javascript
Koa2微信公众号开发之消息管理
2018/05/16 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
2019/08/09 Javascript
layui字体图标 loading图标静止不旋转的解决方法
2019/09/23 Javascript
JavaScript如何判断对象有某属性
2020/07/03 Javascript
[40:19]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.18
2020/12/19 DOTA
Python实现的计算马氏距离算法示例
2018/04/03 Python
python pandas 组内排序、单组排序、标号的实例
2018/04/12 Python
pandas基于时间序列的固定时间间隔求均值的方法
2019/07/04 Python
win10系统Anaconda和Pycharm的Tensorflow2.0之CPU和GPU版本安装教程
2019/12/03 Python
python实现同一局域网下传输图片
2020/03/20 Python
python里的单引号和双引号的有什么作用
2020/06/17 Python
计算机专业学生的自我评价
2013/12/15 职场文书
护士演讲稿范文
2014/01/05 职场文书
项目投资建议书
2014/05/16 职场文书
医务人员医德考评自我评价
2015/03/03 职场文书
大学生自荐书范文
2015/03/05 职场文书
物流业务员岗位职责
2015/04/03 职场文书
道歉短信大全
2015/05/12 职场文书