chenglou / chenglou/react-motion

TransitionMotion animates leave for elements which persist

Open
#532 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
21.9k
Forks
1.1k
PR merge metrics
No merged PRs in 30d

Description

## 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](https://user-images.githubusercontent.com/14984911/38047504-084a088e-32c3-11e8-8db6-c5cb67207dd0.gif)

### 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).
1. "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.
1. "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.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.