Transform transition on sortables bugged in Board example?

thisbeyond / solid-dnd

A lightweight, performant, extensible drag and drop toolkit for Solid JS.

https://solid-dnd.com

MIT License

481 stars 33 forks source link

Transform transition on sortables bugged in Board example? #112

Open paxee opened 1 week ago

paxee commented 1 week ago

https://solid-dnd.com/?example=Board#examples

Normal preview nothing touched: https://github.com/thisbeyond/solid-dnd/assets/120058999/d42505fc-adbc-445d-a661-bca45a141ac4

Added transition for the sortable elements: https://github.com/thisbeyond/solid-dnd/assets/120058999/d628d4c4-fc55-467c-9db2-acfbd54da515

After dragging a sortable, upon release (drop) sometimes other sortables re-trigger transform transition animation...

Also tried adding the transition via class, same behavior
Happens with both transformStyle( ) and maybeTransformStyle()
Happens in dev mode, not tested in production

Anyone know why does this happen and how to fix it? Thanks a lot

martinpengellyphillips commented 1 week ago

In short, haven't got this supported yet. I tried a while back to think about how to better support animation / transition but didn't get to a solution. One day I might give it another go.

paxee commented 1 week ago

Hey Martin, thanks for the fast response, I found an ugly workaround which seems to work without touching the lib - using this inline style on the sortable element for now.

style={{ ...maybeTransformStyle(sortable.transform), transition: (sortable.isActiveDraggable || sortable.isActiveDroppable) ? 'transform 360ms cubic-bezier(0.25, 0.46, 0.45, 0.94)' : '', }}

edit: fixes the re-triggering while dropping, but there's a problem in case of dragging back without dropping the other sortables directly snap back in place without any transition/animation.

anyway that's all for now, I'll wait for support or try to see if I can fix it in the lib Thanks