gridstack.js icon indicating copy to clipboard operation
gridstack.js copied to clipboard

resizestop event triggers before resize animation finishes

Open DoisKoh opened this issue 3 years ago • 2 comments

Subject of the issue

This might be intended behaviour but I think many people would have the same issue as me - being we can't use the resizestop event as-is when animations are on because the functions we need to call would be resizing prematurely - there should probably some kind of resizeanimationstop event.

Your environment

gridstack: ^5.1.1 browser: Chrome os: Windows 10

Expected behavior

resizestop triggers when the gridstack container has finished resizing (animation ends)

Actual behavior

resizestop triggers when the user releases the resize handle (triggers immediately before animation ends)

(or at least an option would be nice, anyway... I've simply resorted to setting animate to false because of this)

DoisKoh avatar Sep 07 '22 08:09 DoisKoh

this has been brought up before. problem is the animation time is a CSS property (can be anything - set by the user) so I don't know when it would finish ? you do get the column/row final numbers, just not the pixel values until the CSS is done animating. Shouldn't do pixel layout IMO as columns can be any sizes and will change...

adumesny avatar Sep 08 '22 02:09 adumesny

Yea unfortunately other libraries (specifically eCharts in my case) is not entirely responsive and requires calling a resize function when resizing occurs.

DoisKoh avatar Sep 08 '22 08:09 DoisKoh

'transitionend' event would need to be created (with fallback in case it's missed with maybe no-op) but right now neither resize nor move (of the main object) are animated anymore so this isn't an issue. Will update code and demo to show non-issue and close. https://stackoverflow.com/questions/2087510/callback-on-css-transition

adumesny avatar Dec 31 '22 00:12 adumesny