本文实例为大家分享了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中渐进过渡效果实现】相关文章：