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": "re-adding animation for drag-n-drop to reorder columns",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]"
+}

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

@@ -142,12 +142,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);
+          }
+        }, 20);
       }
+
       this._async.setTimeout(() => {
         if (this._root!.current!) {
           this._root!.current!.classList!.remove(classNames.borderAfterDropping);
+          this._root!.current!.classList!.remove(classNames.noBorderAfterDropping);
         }
-      }, 1500);
+      }, 1520);
     }
   }
 
@@ -245,6 +253,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);
+        }
+      }, 20);
     }
   }
 
@@ -254,6 +267,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

@@ -53,6 +53,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 +193,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 0.2s ease' }],
+
+    borderAfterDropping: [borderWhileDragging, { left: -1, lineHeight: 31 }],
+
+    noBorderAfterDropping: [borderAfterDragOrDrop, { transition: 'border-color 1.5s ease' }]
   };
 };

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

@@ -47,5 +47,7 @@ export interface IDetailsColumnStyles {
   sortIcon: IStyle;
   filterChevron: IStyle;
   borderAfterDropping: IStyle;
+  noBorderAfterDropping: IStyle;
   borderWhileDragging: IStyle;
+  noBorderWhileDragging: IStyle;
 }