Vue.js vue同一组件的不同转换名称

是否可以为一个元素应用两个转换名称？ 我有3个li元素，我希望所有元素都有相同的假期，但只有最上面的元素有特定的入口。 例如，我希望所有人都让米兹离开，但只有最上面的人让皮兹进入。 我被困在这个问题上，找不到任何这样的例子。如果不可能，有没有其他方法来实现我所寻找的目标

我最后一次尝试是：

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

{{msg.content}{{idx}

---

idx作为道具传递，最上面的li的idx为0。

您可以使用CSS来实现。只需为所有

li{}

元素提供mizi转换，然后用pizi转换覆盖

li:first child{}

元素的mizi转换

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
}