feat(sort): add enter and leave arrow animations (#7180)

Adds animations for when the sorting arrow is added and removed from the DOM.
angular · Sep 29, 2017 · 2d350a0 · 2d350a0
1 parent f19f19c
commit 2d350a0
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git a/src/lib/sort/sort-header.html b/src/lib/sort/sort-header.html
@@ -5,7 +5,7 @@
     <ng-content></ng-content>
   </button>
 
-  <div *ngIf="_isSorted()" class="mat-sort-header-arrow">
+  <div *ngIf="_isSorted()" class="mat-sort-header-arrow" [@indicatorToggle]="_sort.direction">
     <div class="mat-sort-header-stem"></div>
     <div class="mat-sort-header-indicator" [@indicator]="_sort.direction" >
       <div class="mat-sort-header-pointer-left" [@leftPointer]="_sort.direction"></div>

diff --git a/src/lib/sort/sort-header.ts b/src/lib/sort/sort-header.ts
@@ -20,7 +20,8 @@ import {
   state,
   style,
   animate,
-  transition
+  transition,
+  keyframes,
 } from '@angular/animations';
 import {CdkColumnDef} from '@angular/cdk/table';
 import {Subscription} from 'rxjs/Subscription';
@@ -70,6 +71,24 @@ const SORT_ANIMATION_TRANSITION =
       state('asc', style({transform: 'rotate(45deg)'})),
       state('desc', style({transform: 'rotate(-45deg)'})),
       transition('asc <=> desc', animate(SORT_ANIMATION_TRANSITION))
+    ]),
+    trigger('indicatorToggle', [
+      transition('void => asc', animate(SORT_ANIMATION_TRANSITION, keyframes([
+        style({transform: 'translateY(25%)', opacity: 0}),
+        style({transform: 'none', opacity: 1})
+      ]))),
+      transition('asc => void', animate(SORT_ANIMATION_TRANSITION, keyframes([
+        style({transform: 'none', opacity: 1}),
+        style({transform: 'translateY(-25%)', opacity: 0})
+      ]))),
+      transition('void => desc', animate(SORT_ANIMATION_TRANSITION, keyframes([
+        style({transform: 'translateY(-25%)', opacity: 0}),
+        style({transform: 'none', opacity: 1})
+      ]))),
+      transition('desc => void', animate(SORT_ANIMATION_TRANSITION, keyframes([
+        style({transform: 'none', opacity: 1}),
+        style({transform: 'translateY(25%)', opacity: 0})
+      ]))),
     ])
   ]
 })