Fixed all animations

src/app/animations.ts

@@ -6,6 +6,13 @@ import {
     query, group
 } from '@angular/animations';
 
+export const collapseUp = trigger('collapseUp', [
+    transition('* => void', [
+        style({opacity: 1, transform: 'translateY(0%)'}),
+        animate('0.5s', style({opacity: 0, transform: 'translateY(-100%)'}))
+    ])
+]);
+
 export const expandDown = trigger('expandDown', [
     transition('void => *', [
         style({opacity: 0, transform: 'translateY(-100%)'}),
@@ -13,13 +20,20 @@ export const expandDown = trigger('expandDown', [
     ])
 ]);
 
-export const fade = trigger('fade', [
+export const fadeIn = trigger('fadeIn', [
     transition('void => *', [
         style({opacity: 0}),
         animate('0.5s ease-in-out', style({opacity: 1}))
     ])
 ]);
 
+export const fadeOut = trigger('fadeOut', [
+    transition('* => void', [
+        style({opacity: 1}),
+        animate('0.5s ease-in-out', style({opacity: 0}))
+    ])
+]);
+
 export const routerTransition = trigger('routerTransition', [
     transition('* <=> *', [
         query(':enter, :leave', style({position: 'fixed', width: '100%'}), {optional: true}),