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

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

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

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

Idx передается как опора, верхний li имеет idx 0.


vue.js transition css-transitions vuejs-transition
person yarden    schedule 17.03.2019    source источник
comment
Почему бы не использовать переходную группу?   -  person Stephen Thomas    schedule 18.03.2019

Ответы (2)


arrow_upward
1
arrow_downward

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

idx>0 ? 'mizi' : '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
}
person dagalti    schedule 18.03.2019

arrow_upward
0
arrow_downward

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

person Stephen Thomas    schedule 18.03.2019