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

使用这种条件

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
}

Answer 2

您可以使用CSS来实现。只需为所有def defineComplicationsFeatures(patient, comp_list): for i in range(len(comp_list)): for x in comp_list[i].codes: if((any(patient.str.startswith(x,na=False)))): patient[comp_list[i].name]=1 #change 0 to 1 in the break return patient元素提供mizi过渡，然后使用pizi过渡覆盖li {}元素的元素。

vue different transition names for the same component

2 个答案: