vue разные имена переходов для одного и того же компонента

Question

Можно ли применить 2 имени перехода для 1 элемента? У меня есть 3 элемента li, и я хочу, чтобы у всех них был одинаковый отпуск, но только у верхнего элемента был определенный вход. Например, я хочу, чтобы у всех них был mizi-отпуск, но только у самого верхнего, чтобы был pizi-enter. Я застрял в этой проблеме и не могу найти никаких примеров для этого. Если это невозможно, есть ли другой способ добиться того, что я ищу?

Моя последняя попытка была:

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

Идентификатор передается как реквизит, верхний ли имеет идентификатор 0.

Answer 1

Используйте условие как это

idx>0 ? 'mizi' : 'pizi'

Переход 'Pizi' применяется для первого элемента. другие имеют "Мизи".

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

а также

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

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

Answer 2

Вы можете сделать это с помощью CSS. Просто отдай все li {} элементы перехода Mizi, а затем переопределить это для li:first-child {} элементы с переходом пизи.