Re-adding animation for drag-n-drop to reorder columns

common/changes/office-ui-fabric-react/arkgupta-dragDropBorderAnimation_2018-11-23-13-59.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "DetailsList: Re-adding border fade animation as transition on column reorder",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]"
+}

packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.base.tsx

@@ -12,6 +12,9 @@ import { IDetailsColumnStyleProps, IDetailsColumnProps } from './DetailsColumn.t
 const MOUSEDOWN_PRIMARY_BUTTON = 0; // for mouse down event we are using ev.button property, 0 means left button
 
 const getClassNames = classNamesFunction<IDetailsColumnStyleProps, IDetailsColumnStyles>();
+const TRANSITION_DURATION_DRAG = 200; // ms
+const TRANSITION_DURATION_DROP = 1500; // ms
+const CLASSNAME_ADD_INTERVAL = 20; // ms
 
 export class DetailsColumnBase extends BaseComponent<IDetailsColumnProps> {
   private _root: any;
@@ -41,7 +44,9 @@ export class DetailsColumnBase extends BaseComponent<IDetailsColumnProps> {
       isIconVisible: column.isSorted || column.isGrouped || column.isFiltered,
       isPadded: column.isPadded,
       isIconOnly: column.isIconOnly,
-      cellStyleProps
+      cellStyleProps,
+      transitionDurationDrag: TRANSITION_DURATION_DRAG,
+      transitionDurationDrop: TRANSITION_DURATION_DROP
     });
 
     const classNames = this._classNames;
@@ -142,12 +147,20 @@ export class DetailsColumnBase extends BaseComponent<IDetailsColumnProps> {
     if (this.props.isDropped) {
       if (this._root!.current!) {
         this._root!.current!.classList!.add(classNames.borderAfterDropping);
+
+        this._async.setTimeout(() => {
+          if (this._root!.current!) {
+            this._root!.current!.classList!.add(classNames.noBorderAfterDropping);
+          }
+        }, CLASSNAME_ADD_INTERVAL);
       }
+
       this._async.setTimeout(() => {
         if (this._root!.current!) {
           this._root!.current!.classList!.remove(classNames.borderAfterDropping);
+          this._root!.current!.classList!.remove(classNames.noBorderAfterDropping);
         }
-      }, 1500);
+      }, TRANSITION_DURATION_DROP + CLASSNAME_ADD_INTERVAL);
     }
   }
 
@@ -245,6 +258,11 @@ export class DetailsColumnBase extends BaseComponent<IDetailsColumnProps> {
     if (itemIndex) {
       this._updateHeaderDragInfo(itemIndex);
       this._root.current.classList.add(classNames.borderWhileDragging);
+      this._async.setTimeout(() => {
+        if (this._root!.current!) {
+          this._root!.current!.classList!.add(classNames.noBorderWhileDragging);
+        }
+      }, CLASSNAME_ADD_INTERVAL);
     }
   }
 
@@ -254,6 +272,7 @@ export class DetailsColumnBase extends BaseComponent<IDetailsColumnProps> {
       this._updateHeaderDragInfo(-1, event);
     }
     this._root.current.classList.remove(classNames.borderWhileDragging);
+    this._root.current.classList.remove(classNames.noBorderWhileDragging);
   }
 
   private _updateHeaderDragInfo(itemIndex: number, event?: MouseEvent) {

packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.styles.ts

@@ -33,7 +33,9 @@ export const getStyles = (props: IDetailsColumnStyleProps): IDetailsColumnStyles
     isIconVisible,
     isPadded,
     isIconOnly,
-    cellStyleProps = DEFAULT_CELL_STYLE_PROPS
+    cellStyleProps = DEFAULT_CELL_STYLE_PROPS,
+    transitionDurationDrag,
+    transitionDurationDrop
   } = props;
 
   const { semanticColors, palette } = theme;
@@ -53,6 +55,20 @@ export const getStyles = (props: IDetailsColumnStyleProps): IDetailsColumnStyles
     paddingLeft: 8
   };
 
+  const borderWhileDragging: IStyle = [
+    {
+      borderStyle: 'solid',
+      borderWidth: 1,
+      borderColor: palette.themePrimary
+    }
+  ];
+
+  const borderAfterDragOrDrop: IStyle = [
+    {
+      borderColor: 'transparent'
+    }
+  ];
+
   return {
     root: [
       getCellStyles(props),
@@ -179,26 +195,12 @@ export const getStyles = (props: IDetailsColumnStyleProps): IDetailsColumnStyles
 
     accessibleLabel: [hiddenContentStyle],
 
-    borderAfterDropping: [
-      {
-        borderStyle: 'solid',
-        borderWidth: 1,
-        borderColor: palette.themePrimary,
-        left: -1,
-        lineHeight: 31
-      }
-    ],
+    borderWhileDragging: borderWhileDragging,
 
-    borderWhileDragging: [
-      {
-        selectors: {
-          '.ms-DetailsHeader &.ms-DetailsHeader-cell': {
-            borderStyle: 'solid',
-            borderWidth: 1,
-            borderColor: palette.themePrimary
-          }
-        }
-      }
-    ]
+    noBorderWhileDragging: [borderAfterDragOrDrop, { transition: `border-color  ${transitionDurationDrag}ms ease` }],
+
+    borderAfterDropping: [borderWhileDragging, { left: -1, lineHeight: 31 }],
+
+    noBorderAfterDropping: [borderAfterDragOrDrop, { transition: `border-color  ${transitionDurationDrop}ms ease` }]
   };
 };

packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.types.ts

@@ -33,6 +33,8 @@ export type IDetailsColumnStyleProps = Required<Pick<IDetailsColumnProps, 'theme
   isPadded?: boolean;
   isIconOnly?: boolean;
   iconClassName?: string;
+  transitionDurationDrag?: number;
+  transitionDurationDrop?: number;
 };
 
 export interface IDetailsColumnStyles {
@@ -47,5 +49,7 @@ export interface IDetailsColumnStyles {
   sortIcon: IStyle;
   filterChevron: IStyle;
   borderAfterDropping: IStyle;
+  noBorderAfterDropping: IStyle;
   borderWhileDragging: IStyle;
+  noBorderWhileDragging: IStyle;
 }