search

preactjs / preact

⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.
https://preactjs.com
MIT License
36.53k stars 1.94k forks source link

Updates to keyed lists break FLIP animations when they occur mid-animation #2637

Open dead-claudia opened 4 years ago

dead-claudia commented 4 years ago

Reproduction

Flems link

Steps to reproduce

Open sandbox link

Expected Behavior

Animation should be smooth like in this example.

Actual Behavior

Animation is choppy.

Context: Preact is far from the only one affected: https://twitter.com/isiahmeadows1/status/1284726730574315522

Edit: Preact version: 10.4.16

Also relevant: https://github.com/whatwg/html/issues/5742

developit commented 4 years ago

Hiya! I responded on Twitter, but I'll echo here for folks who come across the issue: this is a DOM (or browser?) issue and there isn't anything Preact can do about it. Inserting a child invalidates its sibling's in-flight animations.

Curious if the browser folks come back with ideas for whether this could be fixed without violating the spec though, since it seems like 99% of the time animations continuing on siblings would be as good as or much better than having them restart.