Vue transition-group not working on 1 element

Hi fellow Vue.js Lovers!

Have anyone tried the new vue2.js transition-group feature?
Really cool, but one thing that confuses me is that the transitions only work when there are more then 2 element/child in the transition-group. If there’s only 1 element, No transitions are applied.

//snippet of my codes

    <div class="flash" v-if="flashes.length!=0">
    <transition-group tag="div"enter-active-class="animated slideInLeft"leave-active-class="animated slideOutLeft">
            <div class="flash_box" v-for="flash in flashes" :key="flash.id" :class="flash.class">
                <p>
                    {{flash.message}}
                    <i class="fa fa-times" aria-hidden="true" @click="remove(flash.id)"></i>
                </p>
            </div>
        </transition-group>
    </div>
    ````

Can someone please advice?`Preformatted text`
1 Like

Same for me

In my case this wasn’t working because I wasn’t rendering the transition-group component until there was at least one item in the list I was rendering. If it was already rendered with no items rendered inside of it, adding the first item did animate.

I came into the same issue and this is because of the v-if=“flashes.length!=0” that when it reaches last items it removes the div from DOM instantly and which makes the last item not to animate. So you can have the check if there are items in flashes by having v-if inside transition-group and if you need to have your wrapper div with class flash you can also set a tag with div and class=“flash” in transition-group.