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

使用wowjs和vue

1 个答案: