觸發與wowjs和VUE

Question

一個新的動畫事件我有被填充的清單，但一旦達到一定的長度，我想改變動畫類，並從陣列中移除該項目

<ul id="myList"> 
    <li v-for="item in myItems"> 
    // each item will slide in 
    <div class="box wow slideInRight"> 
     <p style="color: black;">@{{ item }}<p> 
    </div> 
    </li> 
</ul> 

watch: { 
    'myItems'() { 
     if(this.myItems.length > 2) { 

     // get the first item 
     var div = document.getElementsByTagName('ul')[0].children[0].children[0]; 

     // Change class name 
     div.className = 'box wow fadeOutLeft'; 

     // Must also change style 
     div.style.animationName = 'fadeOutLeft'; 

     **// how to trigger the new class ?** 

     // this will trigger all of the classes again, but I just want the first item in the list. Can I select one element? 
     new WOW().init(); 

     // remove first item from the array 
     this.myItems.shift() 

    } 
} 

Answer 1

您可以添加deleting陣列數據來跟蹤目前刪除項目（或項目uniq的屬性）和綁定類（也許風格太）相應的每個項目：

<ul id="myList"> 
    <li v-for="item in myItems"> 
    // each item will slide in 
    <div :class="deleting.indexOf(item) >= 0? 'box wow fadeOutLeft': 'box wow slideInRight'"> 
     <p style="color: black;">@{{ item }}<p> 
    </div> 
    </li> 
</ul> 

和刪除項目之前，你應該把它在加入deleting陣列watch與超時刪除，顯示過渡：

watch: { 
    'myItems'() { 
     if(this.myItems.length > 2) { 
     del_item = this.myItems[0]; 
     this.deleting.push(del_item); 
     setTimeout(()=> 
      this.myItems.shift() 
      this.deleting.splice(this.deleting.indexOf(del_item), 1); 
     }, 1000); 
    } 
} 
// ... 
data: function() { 
    return { 
     deleting: [] 
    } 
}, 

PS：看VUE內置轉換功能 - https://vuejs.org/v2/guide/transitions.html