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

Question

是否可以为 1 个元素应用 2 个转换名称？我有 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。

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 做到这一点。只需给所有li {}元素 mizi 过渡，然后li:first-child {}用 pizi 过渡覆盖元素。