Trigger a new animation event with wowjs and vue

Question

I have a list being populated but once it reaches a certain length, I want to change the animation class and remove the item from the array

<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

You can add deleting array to data to track items (or items uniq attributes) that are currently deleting and bind class (and maybe style too) to each item accordingly:

<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>

And before delete item you should add it to deleting array in watch and delete with timeout to show transition:

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: look at vue builtin transitions feature - https://v2.vuejs.org/v2/guide/transitions.html