From 70bd5fc20e7fe6b1749b334d29e842cb3681609d Mon Sep 17 00:00:00 2001
From: Yevhen Horbachov <killabee1985@gmail.com>
Date: Wed, 30 Aug 2017 04:43:19 +0200
Subject: [PATCH] feat(sort): add sorting indicator animation (#5831)

---
 src/lib/sort/sort-header.html |  3 +--
 src/lib/sort/sort-header.scss | 13 +------------
 src/lib/sort/sort-header.ts   | 15 +++++++++++++++
 src/lib/sort/sort.spec.ts     |  3 ++-
 4 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/lib/sort/sort-header.html b/src/lib/sort/sort-header.html
index d70be440d20d..710ae6b519b6 100644
--- a/src/lib/sort/sort-header.html
+++ b/src/lib/sort/sort-header.html
@@ -7,8 +7,7 @@
 
   <div *ngIf="_isSorted()"
        class="mat-sort-header-arrow"
-       [class.mat-sort-header-asc]="_sort.direction == 'asc'"
-       [class.mat-sort-header-desc]="_sort.direction == 'desc'">
+       [@indicatorRotate]="_sort.direction">
     <div class="mat-sort-header-stem"></div>
     <div class="mat-sort-header-pointer-left"></div>
     <div class="mat-sort-header-pointer-right"></div>
diff --git a/src/lib/sort/sort-header.scss b/src/lib/sort/sort-header.scss
index 64c3dbf67d28..466e3a1e9e95 100644
--- a/src/lib/sort/sort-header.scss
+++ b/src/lib/sort/sort-header.scss
@@ -25,28 +25,17 @@ $mat-sort-header-arrow-thickness: 2px;
 }
 
 .mat-sort-header-arrow {
-  display: none;
   height: $mat-sort-header-arrow-container-size;
   width: $mat-sort-header-arrow-container-size;
   position: relative;
   margin: 0 0 0 $mat-sort-header-arrow-margin;
+  transform: rotate(45deg);
 
   .mat-sort-header-position-before & {
     margin: 0 $mat-sort-header-arrow-margin 0 0;
   }
 }
 
-.mat-sort-header-asc {
-  display: block;
-  transform: rotate(45deg);
-}
-
-.mat-sort-header-desc {
-  display: block;
-  transform: rotate(225deg);
-  top: $mat-sort-header-arrow-thickness;
-}
-
 .mat-sort-header-stem {
   background: currentColor;
   transform: rotate(135deg);
diff --git a/src/lib/sort/sort-header.ts b/src/lib/sort/sort-header.ts
index 8daa517e51e2..fd78373b18c6 100644
--- a/src/lib/sort/sort-header.ts
+++ b/src/lib/sort/sort-header.ts
@@ -15,6 +15,13 @@ import {
   ViewEncapsulation
 } from '@angular/core';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
+import {
+  trigger,
+  state,
+  style,
+  animate,
+  transition
+} from '@angular/animations';
 import {CdkColumnDef} from '@angular/cdk/table';
 import {Subscription} from 'rxjs/Subscription';
 import {merge} from 'rxjs/observable/merge';
@@ -22,6 +29,7 @@ import {MdSort, MdSortable} from './sort';
 import {MdSortHeaderIntl} from './sort-header-intl';
 import {getMdSortHeaderNotContainedWithinMdSortError} from './sort-errors';
 
+
 /**
  * Applies sorting behavior (click to change sort) and styles to an element, including an
  * arrow to display the current sort direction.
@@ -42,6 +50,13 @@ import {getMdSortHeaderNotContainedWithinMdSortError} from './sort-errors';
   },
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [
+    trigger('indicatorRotate', [
+      state('asc', style({transform: 'rotate(45deg)'})),
+      state('desc', style({transform: 'rotate(225deg)'})),
+      transition('asc <=> desc', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)'))
+    ])
+  ]
 })
 export class MdSortHeader implements MdSortable {
   private _rerenderSubscription: Subscription;
diff --git a/src/lib/sort/sort.spec.ts b/src/lib/sort/sort.spec.ts
index de24529d3b3f..803abb0333f4 100644
--- a/src/lib/sort/sort.spec.ts
+++ b/src/lib/sort/sort.spec.ts
@@ -1,6 +1,7 @@
 import {async, ComponentFixture, TestBed, inject} from '@angular/core/testing';
 import {Component, ElementRef, ViewChild} from '@angular/core';
 import {By} from '@angular/platform-browser';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {MdSort, MdSortHeader, Sort, SortDirection, MdSortModule, MdSortHeaderIntl} from './index';
 import {DataSource, CollectionViewer} from '@angular/cdk/collections';
 import {CdkTableModule} from '@angular/cdk/table';
@@ -21,7 +22,7 @@ describe('MdSort', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [MdSortModule, MdTableModule, CdkTableModule],
+      imports: [MdSortModule, MdTableModule, CdkTableModule, NoopAnimationsModule],
       declarations: [
         SimpleMdSortApp,
         CdkTableMdSortApp,