vue中渐进过渡效果实现
笨笨猪1995 人气:0本文实例为大家分享了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; }
效果如下图:
加载全部内容