feat(sort): add sorting indicator animation (#5831)

angular · Aug 30, 2017 · 70bd5fc · 70bd5fc
1 parent 950edcc
commit 70bd5fc
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 15 deletions.
diff --git 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
@@ -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
@@ -15,13 +15,21 @@ 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';
 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
@@ -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,