using style marshal to clear transitions will collecting

src/state/create-store.js

@@ -55,6 +55,7 @@ export default ({
       // post drag animations in firefox. Even though we clear the transition off
       // a Draggable - if it is done after a reorder firefox will still apply the
       // transition.
+      // Must be called before dimension marshal for lifting to apply collecting styles
       style(styleMarshal),
       // Stop the dimension marshal collecting anything
       // when moving into a phase where collection is no longer needed.

src/state/middleware/style.js

@@ -4,8 +4,11 @@ import type { StyleMarshal } from '../../view/style-marshal/style-marshal-types'
 
 export default (marshal: StyleMarshal) =>
   () => (next: (Action) => mixed) => (action: Action): mixed => {
-    // TODO: need to respond to actions and not state values
-    if (action.type === 'INITIAL_PUBLISH') {
+    if (action.type === 'BULK_COLLECTION_STARTING') {
+      marshal.collecting();
+    }
+
+    if (action.type === 'INITIAL_PUBLISH' || action.type === 'BULK_REPLACE') {
       marshal.dragging();
     }
 

src/view/draggable-dimension-publisher/draggable-dimension-publisher.jsx

@@ -93,27 +93,16 @@ export default class DraggableDimensionPublisher extends Component<Props> {
 
   getDimension = (windowScroll: Position): DraggableDimension => {
     const targetRef: ?HTMLElement = this.props.getDraggableRef();
-    // const placeholderRef: ?HTMLElement = this.props.getPlaceholderRef();
     const descriptor: ?DraggableDescriptor = this.publishedDescriptor;
 
     invariant(targetRef, 'DraggableDimensionPublisher cannot calculate a dimension when not attached to the DOM');
     invariant(descriptor, 'Cannot get dimension for unpublished draggable');
 
-    // Record any inline transition delay that a consumer might have applied
-    // We do not apply these - we apply this style using the style marshal
-    const previousInlineTransitionDelay: ?string = targetRef.style.transitionDelay;
-    // Fast forwarding any existing transitions - override style marshal
-    targetRef.style.transitionDelay = '0s';
-
     const computedStyles: CSSStyleDeclaration = window.getComputedStyle(targetRef);
     const borderBox: ClientRect = targetRef.getBoundingClientRect();
 
-    if (previousInlineTransitionDelay) {
-      targetRef.style.transitionDelay = targetRef.style.transitionDelay;
-    } else {
-      targetRef.style.removeProperty('transitionDelay');
-    }
-
+    // We do not need to fast forward any transitions as the style marshal will
+    // do that for us before a collection
     const change: Position = (() => {
       const { isDragging, offset: shift } = this.props;
       const undoTransform: Position = negate(shift);
@@ -130,7 +119,6 @@ export default class DraggableDimensionPublisher extends Component<Props> {
 
     const client: BoxModel = offset(calculateBox(borderBox, computedStyles), change);
 
-    console.log(descriptor.id, 'client', client, 'box sizing', computedStyles.boxSizing);
     const page: BoxModel = withScroll(client, windowScroll);
 
     console.warn(descriptor.id, 'collected pageBorderBoxCenter', page.borderBox.center, 'height', client.borderBox.height);

src/view/style-marshal/get-styles.js

@@ -3,6 +3,7 @@ import { css } from '../animation';
 import * as attributes from '../data-attributes';
 
 export type Styles = {|
+  collecting: string,
   dragging: string,
   resting: string,
   dropAnimating: string,
@@ -136,31 +137,43 @@ export default (styleContext: string): Styles => {
     droppableStyles.base,
   ];
 
-  const resting: string = [
+  const resting: string[] = [
     ...base,
     dragHandleStyles.grabCursor,
-  ].join('');
+  ];
 
-  const dragging: string = [
+  // while collecting we do not animate movements
+  const collecting: string[] = [
     ...base,
     dragHandleStyles.blockPointerEvents,
-    draggableStyles.animateMovement,
     bodyStyles.whileActiveDragging,
-  ].join('');
+  ];
 
-  const dropAnimating: string = [
+  // while dragging we animate movements
+  const dragging: string[] = [
+    ...collecting,
+    draggableStyles.animateMovement,
+  ];
+
+  const dropAnimating: string[] = [
     ...base,
     dragHandleStyles.grabCursor,
     draggableStyles.animateMovement,
-  ].join('');
+  ];
 
   // Not applying grab cursor during a cancel as it is not possible for users to reorder
   // items during a cancel
-  const userCancel: string = [
+  const userCancel: string[] = [
     ...base,
     draggableStyles.animateMovement,
-  ].join('');
+  ];
 
-  return { resting, dragging, dropAnimating, userCancel };
+  return {
+    resting: resting.join(''),
+    dragging: dragging.join(''),
+    dropAnimating: dropAnimating.join(''),
+    collecting: collecting.join(''),
+    userCancel: userCancel.join(''),
+  };
 };
 

src/view/style-marshal/style-marshal-types.js

@@ -4,6 +4,7 @@ import type {
 } from '../../types';
 
 export type StyleMarshal = {|
+  collecting: () => void,
   dragging: () => void,
   dropping: (reason: DropReason) => void,
   resting: () => void,

src/view/style-marshal/style-marshal.js

@@ -49,6 +49,7 @@ export default () => {
     setStyle(styles.resting);
   };
 
+  const collecting = () => setStyle(styles.collecting);
   const dragging = () => setStyle(styles.dragging);
   const dropping = (reason: DropReason) => {
     if (reason === 'DROP') {
@@ -67,6 +68,7 @@ export default () => {
   };
 
   const marshal: StyleMarshal = {
+    collecting,
     dragging,
     dropping,
     resting,