DIV CSS 佈局教程網

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

效果如下圖：

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。