search

joshwcomeau / react-flip-move

Effortless animation between DOM changes (eg. list reordering) using the FLIP technique.
http://joshwcomeau.github.io/react-flip-move/examples
MIT License
4.09k stars 258 forks source link

Animations break when adding / removing items during a transition #223

Closed rihok closed 6 years ago

rihok commented 6 years ago

This is easiest to show with an example, so here's a codepen showing the problem (click the toggle state button in quick succession): https://codepen.io/rihok/pen/qxpzEr

I guess this is a bug.

joshwcomeau commented 6 years ago

Yep, this is documented under Known Issues in the README. We've spent a bunnnnch of time trying to fix this, but it's a surprisingly hard problem (at least, without using the poorly-supported Web Animations API).

Some workarounds are discussed in #195.

Sorry about that, hope you can find a solution!

rihok commented 6 years ago

Can you explain in a little more detail about what the issues are specifically? This ought to be solvable without WAAPI.

I can maybe throw out a naive solution that's certainly not the most elegant one, but should work quite consistently, which would be to hide the original elements and render duplicates during the transition. That way you can read layout position directly and just have the clones find the target, where ever it may be at any given time. Without knowing more about the problem, it's hard to suggest something tho.

joshwcomeau commented 6 years ago

The current solution for enter/leave animations doesn't involve duplicate elements (this is something I wanted to avoid, since with long lists and complex trees it felt like it would be impossible to do it in a performant way).

Essentially how it works is by removing the item from the DOM flow by giving it position: absolute. This is a required step so that siblings can translate into the vacuum that leaving items create. This works quite well, generally, but interrupts can be problematic. The reasons aren't entirely clear to me anymore, it's been a while.

You're welcome to take a stab at fixing it if you'd like; we've tried to keep the code well-commented and easy to follow (although, dozens of bugfixes and bolted-on additional features means that the code is quite complex). But yeah, I'd like to avoid duplicating nodes.