CODEWITHSUNDEEP
javascriptvuejs2
Aaron Fahey
Aaron Fahey

Reputation: 699

VueJS - is it possible to disable animation for a specific element under a transition group

I have a table that shows rows dynamically based on the amount of items in a list. When an item is added to the list, the table row is animated (with a green background) to show a new row is being added, when I remove an item from the list, the table row is animated (with a red background) to show it is being deleted. I show a row with a message of There are no more items in the list when there are no more items.

My problem is when there are no more items left in the list, the table row that shows when the list is empty, is animated with the green background I mentioned above, and same when an item is added to the list (from being empty), that row is animated with a red background

My question: Is it possible to ignore animating a single element under a <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);
        }
    }
});

Upvotes: 0

Views: 2487

Answers (1)

Jan Hus&#225;k
Jan Hus&#225;k

Reputation: 343

remove !important from your css. Without it you can overwrite style of rows with something like this:

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

Transition group just adds or remove classes on child elements, but the animation style is controlled solely by the css.

Upvotes: 2

Related Questions