added animations for tiles

Author: abhishekkhandait

src/app/board/shared/task-card/task-card.component.html

@@ -1,4 +1,4 @@
-<md-card class="card" *ngIf="task.list == tileName"  dnd-draggable [dragEnabled]="true" [dragData]="task">
+<md-card [@flyInOut]="'in'" class="card" *ngIf="task.list == tileName"  dnd-draggable [dragEnabled]="true" [dragData]="task">
     <md-card-header>
         <md-card-title style="font-size:12px">Priority: {{task.priority}}</md-card-title>
         <md-card-subtitle style="font-size:12px">Due date: {{ task.dueDate }}</md-card-subtitle>

src/app/board/shared/task-card/task-card.component.ts

@@ -1,9 +1,21 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, trigger, state, animate, keyframes, style, transition } from '@angular/core';
 
 @Component({
   selector: 'app-board-task-card',
   templateUrl: './task-card.component.html',
-  styleUrls: ['./task-card.component.css']
+  styleUrls: ['./task-card.component.css'],
+  animations: [
+  trigger('flyInOut', [
+    state('in', style({transform: 'translateY(0)'})),
+    transition('void => *', [
+      animate(700, keyframes([
+        style({opacity: 0, transform: 'translateX(-100%)', offset: 0}),
+        style({opacity: 1, transform: 'translateX(15px)',  offset: 0.3}),
+        style({opacity: 1, transform: 'translateX(0)',     offset: 1.0})
+      ]))
+    ])
+  ])
+]
 })
 export class TaskCardComponent implements OnInit {
   @Input() task;