search

vaheqelyan / svelte-grid

A responsive, draggable and resizable grid layout, for Svelte. [NOT MAINTAINED]
https://svelte-grid.now.sh/
MIT License
970 stars 58 forks source link

Fixed jumping items on component resize. #134

Open WbaN314 opened 2 years ago

WbaN314 commented 2 years ago

Items that are not leftmost in grid "jumped" when resizing the grid component. This was due to the 0.2s transition animation playing whenever the grid component is resized. Leftmost items transition in place thats why they appear to not jump.

The fix temporarily adds a CSS class called stopMove to the item in MoveResize whenever the grid component resizes. This class overwrites the transition attribute such that no transition is played. It is added via the flag moveAnimation. MoveAnimation is set in the onResize handler for throttleUpdate + 100ms duration. +100ms is required as exact matching of the throttleUpdate duration leads to stuttering.

WbaN314 commented 2 years ago

Fix for issue https://github.com/vaheqelyan/svelte-grid/issues/125.