From 2d350a0893886481ed1cac13da79b4e0130605d5 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Fri, 29 Sep 2017 22:08:25 +0200
Subject: [PATCH] feat(sort): add enter and leave arrow animations (#7180)

Adds animations for when the sorting arrow is added and removed from the DOM.
---
 src/lib/sort/sort-header.html |  2 +-
 src/lib/sort/sort-header.ts   | 21 ++++++++++++++++++++-
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/lib/sort/sort-header.html b/src/lib/sort/sort-header.html
index bf16458d5038..b181902952cf 100644
--- 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
index 5cf719da9017..87f497d40c23 100644
--- 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})
+      ]))),
     ])
   ]
 })