vue different transition names for the same component

Question

Is it possible to apply 2 transition names for 1 element? I have 3 li elements, and I want that all of them will have the same leave, but only the top one to have a certain entrance. For example, I want all of them to have mizi-leave, but only the top one to have pizi-enter. I'm stuck on that issue and can't find any examples for that. If it's not possible, is there any other way to achieve what I'm looking for?

My last try was:

<transition :name="[idx ? '' : 'pizi', 'mizi']" mode="out-in">
    <li :key="msg.id" class="bigdiv">{{msg.content}} {{idx}}</li>
</transition>

The idx is being passed as a prop, the top li has idx of 0.

Answer 1

Use condition like this

idx>0 ? 'mizi' : 'pizi'

transition 'pizi' apply for first element. others have 'mizi'.

<transition :name="idx>0 ? 'mizi' : 'pizi'" mode="out-in">
    <li :key="msg.id" class="bigdiv">{{msg.content}} {{idx}}</li>
</transition>

and

.pizi-enter-active{
//DIFFERENT ANIMATION 
}

.pizi-leave-active, .mizi-leave-active{
//SAME ANIMATION FOR ALL ELEMENTS
}

Answer 2

You could do it with CSS. Just give all li {} elements the mizi transition, and then override that for li:first-child {} elements with the pizi transition.