How to use react-flip-move with react-window

[shunmian]

I'm trying to use react-window to lazily load list items for react-flip-move. But the animation of react-flip-move doesn't work.

Please see codeSandbox for the sample code:

• this.renderFlipMove is the function that only use react-flip-move, which works great.
• this.renderReactWindow is the function that only use react-window, which works great.
• this.rednerFlipMoveWithReactWindow is the function that use both react-flip-move and react-window, whose animation is not working after remove button is clicked.

It might be the issue that I use react-flip-move incorrectly but I cannot spot the problem.

[tobilen]

This is probably not something i can help you with, since it is about combining two (complex) libraries and as such not really a "react-flip-move" issue.

Anyway, heres my two cents: flip-move needs to be able to manipulate the DOM freely. But the way you're implementing it, the DOM is the result of the virtualization lib. Your virtualization layer needs to yield control of the render tree to your animation layer until the animation is done. Only then can it rerender without the items removed from the DOM. You might want to

• split up those components into a virtualization layer A that passes a list of elements that need to be rendered
• to another component B. Component B then takes care of animating your elements
• Component B manipulates state of component A through callbacks. Those callbacks would need to be behind a timeout, so component B does not cause component A to rerender while it is still in the middle of the animation.

You might also want to take a look at https://github.com/aholachek/react-flip-toolkit or https://github.com/react-spring/react-spring directly instead of "react-flip-move". It is really not built for use with virtualization.