Add entrance animation of todo item.

1 files changed, 20 insertions, 3 deletions

diff --git a/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.ts b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.ts
index e58cca7d..b04d1300 100644
--- a/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.ts
+++ b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.ts
@@ -1,19 +1,36 @@
 import { Component, OnInit } from '@angular/core';
 import { TodoListService, WorkItem } from './todo-list.service';
+import { trigger, transition, style, animate } from '@angular/animations';
 
 @Component({
   selector: 'app-todo-list-page',
   templateUrl: './todo-list-page.component.html',
-  styleUrls: ['./todo-list-page.component.css', './todo-list-color-block.css']
+  styleUrls: ['./todo-list-page.component.css', './todo-list-color-block.css'],
+  animations: [
+    trigger('itemEnter', [
+      transition(':enter', [
+        style({
+          transform: 'translateX(-100%) translateX(-20px)'
+        }),
+        animate('400ms ease-out', style({
+          transform: 'none'
+        }))
+      ])
+    ])
+  ]
 })
 export class TodoListPageComponent implements OnInit {
 
-  items: WorkItem[];
+  items: WorkItem[] = [];
+  isLoadCompleted = false;
 
   constructor(private todoService: TodoListService) {
   }
 
   ngOnInit() {
-    this.todoService.getWorkItemList().subscribe(result => this.items = result);
+    this.todoService.getWorkItemList().subscribe({
+      next: result => this.items.push(result),
+      complete: () => { this.isLoadCompleted = true; }
+    });
   }
 }