Vue 2: Transition not working on component

Question

I have an animation that works on other components but does not work with this one. I tried <transition-group> with no luck as well. The row simply disappears without any animation.

<transition name="card-animation">
    <tr is="employee-row" 
        v-for="employee in employees" 
        :employee="employee" 
        :selectedOffice='selectedOffice'
        :new_hire_location_options="new_hire_location_options"
        v-on:fire='fireEmployee(employee)'
        v-if="(employee.location.name == selectedOffice || selectedOffice == 'show all')">
    </tr>
</transition>

Here's the CSS

.card-animation-enter-active, .card-animation-leave-active {
    transition: transform 0.25s ease-out, opacity 0.25s ease-out;
}

.card-animation-enter, .card-animation-leave-to {
    transform: scale(0);
    opacity: 0;
}

What is wrong with my code?

Eric Guan Eric Guan · Accepted Answer · 2017-07-26T18:14:28

You need to use transition-group to work with v-for. If you are using a string template, you also need the tag="tbody" attribute.

If you are using a DOM template, you need to use <tbody name="card-animation" is="transition-group">. Reference: https://github.com/vuejs/vue/issues/3907

example: https://jsfiddle.net/2LLkene5/

Vue 2: Transition not working on component

1 Answers