Logical ID key
key = item.idList animation needs to distinguish two ideas:
An item that only moves keeps its transition key. When an animation layer retains its exiting DOM, an item that returns before that exit finishes needs a second key for its new visual presence.
Interactive failure lab
Start with a readable pace, then tune the state interval and motion duration below. The interrupted FLIP exposes whether an exiting DOM is incorrectly reused.
key = item.idkey = entry.key#n actual DOM instancek:<nanoid> Likftc transition keysame ID + continuously present -> retain key
same ID + absent then present -> allocate fresh key
duplicate ID in one frame -> reject the whole frame
The untreated pane uses item.id as the framework key. The readable default updates state every 1,000 ms
while each FLIP and exit runs for 3,000 ms; both values are adjustable above the lists. The loop advances
from A/B/C to D/A/B, C/D/A, and B/C/D before returning to A/B/C, so correct movement always goes
downward. When C returns
on frame 3, FLIP reuses the still-exiting keyed DOM and pulls it
upward into C’s new slot. Likftc keeps old C on one nanoid transition key as an out-of-flow
overlay while new C enters on a different nanoid transition key.
Every pane keeps three layout rows even while multiple exits remain in the DOM.