vue中渐进过渡效果实现

本文实例为大家分享了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;
}

效果如下图：