fix(sort): arrow visible while parent row is being animated (#11827)

Author: crisbeto

src/lib/sort/sort-animations.ts

@@ -54,11 +54,11 @@ export const matSortAnimations: {
   arrowOpacity: trigger('arrowOpacity', [
     state('desc-to-active, asc-to-active, active', style({opacity: 1})),
     state('desc-to-hint, asc-to-hint, hint', style({opacity: .54})),
-    state('hint-to-desc, active-to-desc, desc, hint-to-asc, active-to-asc, asc',
+    state('hint-to-desc, active-to-desc, desc, hint-to-asc, active-to-asc, asc, void',
         style({opacity: 0})),
     // Transition between all states except for immediate transitions
-    transition('* => asc, * => desc, * => active, * => hint', animate('0ms')),
-    transition('* <=> *', animate(SORT_ANIMATION_TRANSITION))
+    transition('* => asc, * => desc, * => active, * => hint, * => void', animate('0ms')),
+    transition('* <=> *', animate(SORT_ANIMATION_TRANSITION)),
   ]),
 
   /**

src/lib/sort/sort-header.scss

@@ -38,6 +38,10 @@ $mat-sort-header-arrow-hint-opacity: 0.38;
   position: relative;
   display: flex;
 
+  // Start off at 0 since the arrow may become visible while parent are animating.
+  // This will be overwritten when the arrow animations kick in. See #11819.
+  opacity: 0;
+
   &,
   [dir='rtl'] .mat-sort-header-position-before & {
     margin: 0 0 0 $mat-sort-header-arrow-margin;