Transform transition on sortables bugged in Board example?  #112

Activity

1. martinpengellyphillips commented on Jun 20, 2024

   

   martinpengellyphillips

   on Jun 20, 2024

   Contributor

   More actions

   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.

   👍React with 👍1Reacted by Paxee (Alex)
2. paxee commented on Jun 21, 2024

   

   paxee

   on Jun 21, 2024

   Last edited by paxee

   Author

   More actions

   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

   👀React with 👀1Reacted by Martin Pengelly-Phillips
3. paxee commented on Mar 22, 2025

   

   paxee

   on Mar 22, 2025

   Author

   More actions

   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.