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'

преходът 'pizi' се прилага за първия елемент. други имат "mizi".

<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