how to make Vue transition not overlaping ?

Question

i have an array of data, at some point the data need to be reordered. so the element change along, but the transition of element exit and enter happen at the same time. making the new sorted elements snap to top when the transition done.

how can i make the enter transition wait for the exit transition ?

here is the code, try to move from/to most recent and most popular
https://code.sololearn.com/W4tT9QMGzwAl/?ref=app

Answer 1

my current solution is clearing the array and finally use setTimeout to add back the sorted data.