Vue: Transition move triggered by input model update

[cristijora]

Version

2.4.2

Reproduction link

http://jsfiddle.net/8zgakspv/49/

Steps to reproduce

1. Add an item
2. While the item moves to it's position quickly type something in the input.

What is expected?

The added item transition should be list-enter

What is actually happening?

The which is being added gets list-move transition applied

---

Looking a bit in the code it seems that the "move" transition is applied whenever the position of an element in the list changes

which is triggered upon update

which I assume is triggered by the input change which causes the transition group component to be updated

[jkzing]

It should be related to #5800 and #6024 somehow.

[yyx990803]

The <transition-group> is diffed on each input update, and it has to re-trigger the FLIP animation again. A workaround is by splitting the <transition-group> into a separate component so that its update is decoupled from the parent context.

[cristijora]

Following your suggestion @yyx990803 , wrapping the transition-group in a component doesn't seem to fix the problem http://jsfiddle.net/8zgakspv/67/
Am I missing something? Tried to wrap the whole thing in a div and the issues still persists

[yyx990803]

You misunderstood - what I meant is this: http://jsfiddle.net/yyx990803/8zgakspv/70/

[yyx990803]

Closing since I don't think there is an easy way to fix this - instead we should probably add a note about this caveat and workaround in docs. /cc @chrisvfritz

[chrisvfritz]

Will do. 👍