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>

Идентификатор передается как реквизит, верхний ли имеет idx 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 {} элементов с переходом pizi.