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

TransitionMotion animates leave for elements which persist #532

Open
kettanaito opened this issue Mar 28, 2018 · 0 comments
Open

TransitionMotion animates leave for elements which persist #532

kettanaito opened this issue Mar 28, 2018 · 0 comments

Comments

@kettanaito
Copy link

kettanaito commented Mar 28, 2018

Environments

node: 6.9.5
npm: 5.8.0
react-motion: 0.5.2

What

Hi. I am experiencing a strange issue while animating the list of items. The data for the items comes from the Redux store. All data manipulations are conducted through actions/reducers, just as Redux implies. Here is a visual capture of the issue:

ezgif-4-ab1e901aa1

The problem

Whenever the first or second item is removed, it animates leave for all items of the same parity. For example, when item 1 is removed, it animates items 3, 5, 7 and so on as they are removed as well. The same happens with odd numbers - only when you remove item 2 it animates leave for 2 and 4, 6, 8 and so on. As you see from the gif, it then animates them back in, since the items are, essentially, never deleted/unmounted.

Why

  1. Your first guess may be "duplicated keys!" Sorry, keys are unique (I am using 2 hard-coded unique strings, and the items appended in runtime use Math.random()). I can ensure that keys are unique using devtools. Although I'm using Math.random, I generate the ID by the time of adding the product to store. Afterward the generated ID remains the same (so it's not like I'm putting it in render method so it re-generates each time).
  2. "Well, then you delete more items than you want" you say. Nope. I delete items by their id, which serves as styles[N].key as well. DELETE_ITEM action is dispatched once, for the item which remove button I click. The fact that only the needed ID is deleted (Redux store inspection) proves that IDs are indeed unique.
  3. "You just using it wrong". Well, most likely. However, I am really almost copy-pasting TransitionMotion example... I count on your experience to point my mistakes out.

The wrongly animated nodes never unmount and their ids remain the same.

How

Here's the gist with my components: https://gist.github.com/kettanaito/f000f1b550b985598ff57715ad9d6e36.

I'm experiencing this on my side project hosted outside GitHub. I can, however, send you the link in case the gist is not enough.

Sidenote

I bet my guess on the composition of defaultStyles or styles.

Thank you.

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

No branches or pull requests

1 participant