[HIMA-61] - timing updates on customer search animation

src/app/modules/customer-search/components/customer-search/customer-search.component.html

@@ -8,14 +8,14 @@
     <span class="customer-section-header">{{ titles[item] }}</span>
   </app-card>
 </div>
-<div class="content" [ngSwitch]="active" [@fadeIn]="active">
-  <div *ngSwitchCase="'search'">
+<div class="content" [ngSwitch]="active">
+  <div *ngSwitchCase="'search'" [@fadeIn]="active">
     <app-search-customer-card></app-search-customer-card>
   </div>
-  <div *ngSwitchCase="'scan'">
+  <div *ngSwitchCase="'scan'" [@fadeIn]="active">
     Not implemented
   </div>
-  <div *ngSwitchCase="'create'">
+  <div *ngSwitchCase="'create'" [@fadeIn]="active">
     <app-create-customer-card></app-create-customer-card>
   </div>
 </div>

src/app/modules/customer-search/components/customer-search/fade-in.animation.ts

@@ -7,19 +7,13 @@ import {
 } from '@angular/animations';
 
 export const fadeInAnimation = trigger('fadeIn', [
-  transition('* => *', [
-    query(':enter', [style({ opacity: 0 })], { optional: true }),
+  transition(':leave', [
+    style({ opacity: 1 }),
+    animate('0.3s ease-in', style({ opacity: 0 }))
+  ]),
 
-    query(
-      ':leave',
-      [style({ opacity: 1 }), animate('0.3s', style({ opacity: 0 }))],
-      { optional: true }
-    ),
-
-    query(
-      ':enter',
-      [style({ opacity: 0 }), animate('0.2s', style({ opacity: 1 }))],
-      { optional: true }
-    )
+  transition(':enter', [
+    style({ opacity: 0 }),
+    animate('0.3s ease-out', style({ opacity: 1 }))
   ])
 ]);

src/app/modules/customer-search/components/customer-search/stagger.animation.ts

@@ -14,7 +14,7 @@ export const staggerAnimation = trigger('listAnimation', [
     query(':leave', [
       style({ height: '0', marginTop: '-56px', visibility: 'hidden' })
     ]),
-    query('*', [stagger(20, [animate('0.15s', style({ opacity: 0 }))])]),
-    query('*', [stagger(-10, [animate('0.15s', style({ opacity: 1 }))])])
+    query('*', [stagger(20, [animate('0.1s', style({ opacity: 0 }))])]),
+    query('*', [stagger(-10, [animate('0.1s', style({ opacity: 1 }))])])
   ])
 ]);