search

inokawa / virtua

A zero-config, fast and small (~3kB) virtual list (and grid) component for React, Vue, Solid and Svelte.
https://inokawa.github.io/virtua/
MIT License
1.26k stars 44 forks source link

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

Open aeharding opened 6 months ago

aeharding commented 6 months ago

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:

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 commented 6 months ago

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 commented 6 months ago

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 commented 6 months ago

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.