VueJS - 是否有可能禁用过渡组下的特定元素的动画

我有一个基于列表中的项目数量动态显示行的表。当一个项目被添加到列表中时，表格行被动画化（具有绿色背景）以显示正在添加的新行，当我从列表中移除一个项目时，表格行被动画（带有红色背景）显示它正在被删除。当没有更多项目时，我会显示一行消息There are no more items in the list。VueJS - 是否有可能禁用过渡组下的特定元素的动画

我的问题是当有没有更多的项目在列表中，显示列表为空时的表格行，用上面提到的绿色背景进行动画，而当项目添加到列表（从空），该行是动画与红色背景

我的问题：是否可以忽略动画<transition-group>下的单个元素？

HTML：

<table class="table table-striped" id="item-table"> 
    <thead> 
     <tr> 
      <th>Item</th> 
      <th>Description</th> 
     </tr> 
    </thead> 
    <tbody name="fade" is="transition-group"> 
     <tr v-for="(item, index) in items" :key="item.id"> 
      <td> 
       {{ item.name }} 
      </td> 
      <td class="text-center"> 
       <button class="btn btn-primary" @click.prevent="removeItem(index, item.id)"><i class="fa fa-check"></i></button> 
      </td> 
     </tr> 
     <tr v-if="items.length == 0" class="text-center" key="noItems"> 
      <td colspan="2">There are no more items in the list</td> 
     </tr> 
    </tbody> 
</table>

CSS：

.fade-enter-active { 
    transition: opacity 1.5s; 
    background-color: #a1ec8e !important; 
} 

.fade-leave-active { 
    transition: opacity 1.5s; 
    background-color: tomato !important; 
} 

.fade-enter, .fade-leave-to { 
    opacity: 0 
}

JS：

const App = new Vue({ 
    el: "#app", 

    data() { 
     return { 
      items: [], 
     } 
    }, 

    methods: { 
     addItem(item) { 
      this.items.push(item); 
     }, 

     removeItem(index) { 
      this.items.splice(index, 1); 
     } 
    } 
});

来源

2017-08-01 Aaron Fahey

移除你的CSS重要！没有它，你可以覆盖行的风格是这样的：

.fade-enter-active[key="noItems"] { 
    background-color: yellow; 
}

过渡小组只是增加或子元素删除类，但动画风格由CSS进行控制的。

来源

2017-08-01 09:55:06

VueJS - 是否有可能禁用过渡组下的特定元素的动画

回答

相关问题