vue transition动画连续触发混乱

Question

如图，一开始，慢慢点击的时候，动画是正常的；但是后来连续点击，动画就会错乱，我大概找到原因是，leave-enter还没结束，enter就已经触发，不不知道怎么解决，代码如下：

求大神┭┮﹏┭┮

Answer 1

1. 试一试 mode="in-out"
2. 使用 transition；使用 key 可以也可以渲染多个元素

地址： 多个元素的过渡

Answer 2

mode="out-in"

Answer 3

谢谢上面的回答，确实是过度模式的问题：
一个离开过渡的时候另一个开始进入过渡就会导致上面的问题
1.out-in当前元素先进行过渡，完成之后新元素过渡进入。
2.in-out新元素先进行过渡，完成之后当前元素过渡离开。
3.transition-group的mode是没法生效的，所以只能用transition
4.我这边使用的是v-show，相当于visiblity:hidden，所以导致一开始只能用transition-group，换成v-if加上过渡模式就解决了