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 · Accepted Answer · 2017-07-26 18:14:28Z

1

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/

answered Jul 26, 2017 at 18:14

Eric Guan

16.1k10 gold badges53 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Jeremy Thomas Over a year ago

As stated in the question I've tried <transition-group> and it didn't work

Eric Guan Over a year ago

But did you also use the tag="tbody" attribute? You have to use transition-group to animate list changes, there's no other way.

Jeremy Thomas Over a year ago

to which element? <transition-group> or the <tr>

Eric Guan Over a year ago

transition-group. <transition-group tag="tbody" name="card-animation>"

Jeremy Thomas Over a year ago

still no animation. I think the issue is that each <tr> is the component employee-row and I'm looping through employees and designating each <tr> as employee-row and trying to animate them at the same time. My issue is that using the is keyword is my only way to display properly

|

Collectives™ on Stack Overflow

Vue 2: Transition not working on component

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related