Dev

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]

src/app/note-card/note-card.component.scss

@@ -34,7 +34,7 @@
             position: relative;
 
 
-            max-height: 90px;
+            max-height: 10vh;
             // overflow: hidden;
             overflow: auto;
 

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>

src/app/pages/notes-list/notes-list.component.scss

@@ -8,6 +8,7 @@
     margin: auto;
 
     padding-top: 50px;
+    overflow-wrap: break-word;
 }
 
 .notes-list{

src/app/pages/notes-list/notes-list.component.ts

@@ -1,11 +1,87 @@
+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';
 
 @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 {