Jump when partially offscreen item animates to height of zero for removal

[aeharding]

Describe the bug

I have a UI where an item animates removal by animating to a height of zero and then removes itself from the list. The bug: Upon removal, if the item is off screen, the list will jump by one item.

To Reproduce

https://github.com/inokawa/virtua/pull/416

Video here: https://github.com/inokawa/virtua/assets/2166114/72cdd3bf-533f-4250-ae91-360161d719ea

Expected behavior

Should not jump by one item.

Platform:

• OS: [Windows, MacOS, Linux, Android, iOS] All
• Browser: [Chrome, Firefox, Safari, Edge] Testing Safari and Firefox
• Version of this package: [x.x.x] 0.29.1
• Version of framework: [react, vue, solid-js] [x.x.x] React

Additional context

I am not sure if I am doing something wrong. If there is a better way to implement user-side that will not cause jump without library change, please let me know!

[inokawa]

Currently this library requires shift props to be true if you remove items from the upper outside of viewport. So in this case setting shift: true manually may fix the jump but it will be hard to switch...

[aeharding]

Thanks for taking a look! I've thought about this a bit more, and I wonder if #181 could help with this? Because then the item would not be immediately removed by Virtua when off the screen, so Virtua could properly calculate shift when the item is removed.

The only drawback is it would require additional application logic to change append only mode during animation, so maybe there is a more intuitive way...

[inokawa]

#181 was released in 0.30.0. I'm not sure if it will solve the problem, but it probably depends on your application logic.