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

Question

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

Answer 1

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>