Transition-group transition on empty array

[wbijker]

Vue.js version

2.1.10

Reproduction Link

https://jsfiddle.net/z11fe07p/686/#

Steps to reproduce

There seems to be an issue with the transition-group component when transitions is applied on each element iterating on a v-for with an initial empty array.

Whenever you add (push) an item to the array before the previous transition is completed all previous transition will stop. But if you wait for the first transition to finish - but only on the first instance - and then try to add items all works as expected. Similar, if you fill the initial array with 1 or more values, all works as expected.

What is Expected?

All items should continue to animate.

What is actually happening?

Animation stops for all elements except for the last one added.
It seems that Vue detects a change in position and therefore replace all transition classes with the move class.

[Kingwl]

i'm so sorry for my three pr
i make some mistake

[posva]

hey, no need to apologise 😄
Thanks for taking the time to make a PR

[Kingwl]

@posva
i cannot recurrent that when i write the unit test because the transition is in .test it is always been set
i try to move transition from .wave-enter-active to .item then it work fine
so is this still a bug
https://jsfiddle.net/z11fe07p/706/

[posva]

@Kingwl Sorry for the delay. I believe it's a bug because if you wait for the first transition to finish there's no problem with the rest of the animations. It only happens if you add many items on the empty array without waiting for the first transition to finish. I'll check and see if I can help out 🙂