У меня есть таблица, которая показывает строки динамически в зависимости от количества элементов в списке. Когда элемент добавляется в список, строка таблицы анимируется (с зеленым фоном), чтобы показать добавление новой строки, когда я удаляю элемент из списка, строка таблицы анимируется (с красным фоном), чтобы показать, что он удаляется. Я показываю строку с сообщением 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);
        }
    }
});
0
Aaron Fahey 1 Авг 2017 в 09:35

1 ответ

Лучший ответ

Удалите! important из вашего CSS. Без него вы можете перезаписать стиль строк примерно так:

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

Группа перехода просто добавляет или удаляет классы дочерних элементов, но стиль анимации контролируется исключительно CSS.

2
Jan Husák 1 Авг 2017 в 12:55