vue中渐进过渡效果实现
2016-10-27 09:25
991 查看
本文实例为大家分享了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.js实现微信过渡动画左右切换效果
- 前端框架Vue(14)—— 利用 vue 过渡效果(transition)+定时器 实现轮播图通用组件
- Vue 过渡实现轮播图效果
- vue元素实现动画过渡效果
- vue2.0 transition组件实现过渡效果
- vue过渡效果的几种实现方法、各种滑动
- vue-cli项目中过渡效果的实现
- 过渡形式实现翻转切换页面的效果
- HTML5 Canvas渐进填充与透明实现图像的Mask效果
- AS3.0实现百叶窗过渡效果
- 学习css3过渡效果,可以实现很好玩的东西,无需js
- [ActionScript 3.0] 利用ColorTransform实现对象(图片)的曝光过渡效果
- animation渐进实现点点点等待效果实例页面
- 使用TransitionDrawable实现两张图片的过渡效果
- 基于javascript实现漂亮的页面过渡动画效果附源码下载
- css3实现网页平滑过渡效果
- 使用TransitionDrawable实现两张图片的过渡效果
- jQuery实现的加载页面过渡效果
- 用TransitionDrawable实现ImageView渐隐渐显过渡效果,并解决OutOfMemory问题