Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Transition move triggered by input model update #6489

Closed
cristijora opened this issue Aug 31, 2017 · 6 comments
Closed

Transition move triggered by input model update #6489

cristijora opened this issue Aug 31, 2017 · 6 comments

Comments

@cristijora
Copy link

cristijora commented Aug 31, 2017

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

@cristijora cristijora changed the title Transition move triggered randomly Transition move triggered by input model update Aug 31, 2017
@jkzing
Copy link
Member

jkzing commented Aug 31, 2017

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

@yyx990803
Copy link
Member

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
Copy link
Author

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
Copy link
Member

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

@yyx990803
Copy link
Member

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
Copy link
Contributor

Will do. 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants