VueJS - 是否可以禁用过渡组下特定元素的动画答案

【问题标题】：VueJS - is it possible to disable animation for a specific element under a transition groupVueJS - 是否可以禁用过渡组下特定元素的动画
【发布时间】：2018-01-07 21:22:57
【问题描述】：

我有一个表格，它根据列表中的项目数量动态显示行。当一个项目被添加到列表中时，表格行被动画（带有绿色背景）以显示正在添加一个新行，当我从列表中删除一个项目时，表格行被动画（带有红色背景）到显示它正在被删除。当没有更多项目时，我会显示一行带有 There are no more items in the list 的消息。

我的问题是当列表中没有更多项目时，当列表为空时显示的表格行，以我上面提到的绿色背景为动画，当一个项目时也是如此被添加到列表中（从为空），该行以红色背景进行动画处理

我的问题：是否可以忽略 <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);
        }
    }
});

【问题讨论】：

标签： javascript vuejs2

【解决方案1】：

从你的 CSS 中移除 !important。没有它，您可以使用以下内容覆盖行样式：

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

过渡组只是在子元素上添加或删除类，但动画样式完全由 css 控制。

【讨论】：