Race condition in transition-group

[nkovacs]

Version

2.5.17

Reproduction link

https://jsfiddle.net/nkovacs/Lskfredn/

Steps to reproduce

1. Click the add button

What is expected?

the animation should work properly, and animation classes should be cleaned up

What is actually happening?

the enter animation doesn't work and the new item's element keeps the list-enter-to class forever

---

The style tag binding triggers a second rerender of the transition-group component between the transition-group setting _enterCb on the entering new child and nextFrame triggering its callback. prevChildren is updated to include the new item, and update calls the pending _enterCb callback. Then after that, nextFrame triggers, but because _enterCb can only be called once, it won't be called, so the enter-to class will remain on the element.

This only happens if the transition-group has a move transition.

The bug also occurs if the elements are changed between update and nextFrame: https://jsfiddle.net/nkovacs/cnjso1h5/

[janschoenherr]

This is happening for me too. However it is only happening when trying to transition the transform property. The left property works as expected.

[nkovacs]

That's strange, it shouldn't matter what you are transitioning, the only important thing is that you have a move class with a transition.