vue.jsvuejs-transition-group

How to use `transition-group` with custom tag and class


I need to render a div with item class

<div class="ui horizontal list">
    <transition-group name="custom-classes-transition” enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutLeft">
        <div class="item" v-for="(filter, filterIndex) in filters" :key="filterIndex”> .. </div>
    </transition-group>
</div>

.item should be directly nested of .ui.list

I try to add tag="div” but this add a new div with my div.item


Solution

  • Simply add a class prop to your transition-group.

    Example:

    <transition-group class="ui horizontal list" name="custom-classes-transition" enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutLeft">
        <div class="item" v-for="(filter, filterIndex) in filters" :key="filterIndex"> .. </div>
    </transition-group>