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:
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
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).
"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.
"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.
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:
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
Math.random()). I can ensure that keys are unique using devtools. Although I'm usingMath.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).styles[N].keyas well.DELETE_ITEMaction 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.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
defaultStylesorstyles.Thank you.