vue中渐进过渡效果实现

2019-11-20 08:39:15

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了vue 渐进过渡效果，供大家参考，具体内容如下，供大家参考，具体内容如下

transition 与 v-for 一起用时可以创建渐近过渡。给过渡元素添加一个特性 stagger,enter-stagger 或 leave-stagger：

或者，提供一个钩子 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;}

效果如下图：