本文實例為大家分享了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;}效果如下圖：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
