From c50b610f1e2b3d720249a14be48fec040aa72633 Mon Sep 17 00:00:00 2001
From: EvansMutwiri <mutwirievansm@gmail.com>
Date: Wed, 10 Nov 2021 00:35:18 +0300
Subject: [PATCH] card animation

---
 src/app/app.module.ts                         |  4 +-
 src/app/note-card/note-card.component.scss    |  2 +-
 .../notes-list/notes-list.component.html      |  3 +-
 .../notes-list/notes-list.component.scss      |  1 +
 .../pages/notes-list/notes-list.component.ts  | 78 ++++++++++++++++++-
 5 files changed, 84 insertions(+), 4 deletions(-)

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 61412d0..525c7c7 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
 
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { NotesListComponent } from './pages/notes-list/notes-list.component';
@@ -20,7 +21,8 @@ import { NoteDetailsComponent } from './pages/note-details/note-details.componen
   imports: [
     BrowserModule,
     AppRoutingModule,
-    FormsModule
+    FormsModule,
+    BrowserAnimationsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/src/app/note-card/note-card.component.scss b/src/app/note-card/note-card.component.scss
index 0a7c58b..791b574 100644
--- a/src/app/note-card/note-card.component.scss
+++ b/src/app/note-card/note-card.component.scss
@@ -34,7 +34,7 @@
             position: relative;
 
 
-            max-height: 90px;
+            max-height: 10vh;
             // overflow: hidden;
             overflow: auto;
 
diff --git a/src/app/pages/notes-list/notes-list.component.html b/src/app/pages/notes-list/notes-list.component.html
index 2632b51..ddeb69a 100644
--- a/src/app/pages/notes-list/notes-list.component.html
+++ b/src/app/pages/notes-list/notes-list.component.html
@@ -10,10 +10,11 @@
     </div>
   </div>
 
-  <div class="notes-list">
+  <div class="notes-list" [@listAnim]>
     <app-note-card
       *ngFor="let note of notes; index as i"
       [link]="i.toString()"
+      [@itemAnim]
       (delete)="deleteNote(i)"
       [title]="note.title"
       [body]="note.body"></app-note-card>
diff --git a/src/app/pages/notes-list/notes-list.component.scss b/src/app/pages/notes-list/notes-list.component.scss
index 658a4c5..7148c6b 100644
--- a/src/app/pages/notes-list/notes-list.component.scss
+++ b/src/app/pages/notes-list/notes-list.component.scss
@@ -8,6 +8,7 @@
     margin: auto;
 
     padding-top: 50px;
+    overflow-wrap: break-word;
 }
 
 .notes-list{
diff --git a/src/app/pages/notes-list/notes-list.component.ts b/src/app/pages/notes-list/notes-list.component.ts
index ded5a80..be9ee92 100644
--- a/src/app/pages/notes-list/notes-list.component.ts
+++ b/src/app/pages/notes-list/notes-list.component.ts
@@ -1,3 +1,4 @@
+import { animate, query, stagger, style, transition, trigger } from '@angular/animations';
 import { Component, OnInit } from '@angular/core';
 import { Note } from 'src/app/shared/note.model';
 import { NotesService } from 'src/app/shared/notes.service';
@@ -5,7 +6,82 @@ import { NotesService } from 'src/app/shared/notes.service';
 @Component({
   selector: 'app-notes-list',
   templateUrl: './notes-list.component.html',
-  styleUrls: ['./notes-list.component.scss']
+  styleUrls: ['./notes-list.component.scss'],
+  animations: [
+    trigger('itemAnim', [
+      //entry anim
+      transition('void => *', [
+        //initial state
+        style({
+          height: 0,
+          opacity:0,
+          transform: 'scale(0.85)',
+          'margin-bottom': 0,
+
+          //expand out padding properties due to browser bugs
+          paddingTop: 0,
+          paddingBottom: 0,
+          paddingRight: 0,
+          paddingLeft: 0,
+
+        }),
+        //call animation function
+
+        animate('50ms', style({
+          height: '*',
+          'margin-bottom': '*',
+          paddingTop: '*',
+          paddingBottom: '*',
+          paddingLeft: '*',
+          paddingRight: '*',
+        })),
+        //final state
+        animate(68)
+      ]),
+
+      //delete card animation
+      transition('* => void', [
+        animate(50, style({
+          transform: 'scale(1.1)',
+          opacity: 0.75
+        })),
+
+        animate('120ms ease-out', style({
+          transform: 'scale(0.68',
+          opacity: 0,
+        })),
+
+        //animate spacing
+
+        animate('150ms ease-out', style({
+          height: 0,
+          paddingTop: 0,
+          paddingBottom: 0,
+          paddingLeft: 0,
+          paddingRight: 0,
+          'margin-bottom': '0',
+        }))
+
+      ])
+      
+    ]),
+
+    trigger('listAnim', [
+      transition('* => *', [
+        query(':enter', [
+          style({
+            opacity: 0,
+            height: 0
+          }),
+          stagger(60, [
+            animate('0.2s ease')
+          ])
+        ], {
+          optional: true
+        })
+      ])
+    ])
+  ]
 })
 export class NotesListComponent implements OnInit {