From de13ec9278dec94e073cbd05fd371ca0a3dc8a51 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Fri, 29 Jun 2018 18:35:23 +0200
Subject: [PATCH] fix(sort): arrow visible while parent row is being animated
 (#11827)

---
 src/lib/sort/sort-animations.ts | 6 +++---
 src/lib/sort/sort-header.scss   | 4 ++++
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/lib/sort/sort-animations.ts b/src/lib/sort/sort-animations.ts
index b9b82ba7c5d8..7f0526a6773b 100644
--- a/src/lib/sort/sort-animations.ts
+++ b/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)),
   ]),
 
   /**
diff --git a/src/lib/sort/sort-header.scss b/src/lib/sort/sort-header.scss
index 56420668bace..da758bf44c15 100644
--- a/src/lib/sort/sort-header.scss
+++ b/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;