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

This commit is contained in:
Kristiyan Kostadinov
2018-06-29 18:35:23 +02:00
committed by Joey Perrott
parent 415c956184
commit c59abc6c8f
2 changed files with 7 additions and 3 deletions
+3 -3
View File
@@ -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)),
]),
/**
+4
View File
@@ -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;