Transform transition on sortables bugged in Board example?

[paxee]

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]

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]

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

[paxee]

Update:

const [state]: any = useDragDropContext(); // Get the state

solution 1. via class:

// Toggle the class based on condition
classList={{
  "opacity-25": sortable.isActiveDraggable,
  "transition-active": state.active.draggableId && sortable.transform,
 }}
style={maybeTransformStyle(sortable.transform)}

(in CSS)
.transition-active { transition: transform 360ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } // whatever transition

solution 2. via inline style only:

style={{
  ...maybeTransformStyle(sortable.transform),
  transition: state.active.draggableId && sortable.transform
    ? "transform 360ms cubic-bezier(0.25, 0.46, 0.45, 0.94)"
    : "",
}}

These are fully functional solutions which will add transition for items to smoothly animate their transforms. ✌

Looking forward to exploring a lib based integration.