Refactored notification animations

src/app/shared/animations/fade.ts

@@ -1,14 +1,24 @@
-import { animate, style, transition, trigger } from '@angular/animations';
+import { animate, state, style, transition, trigger } from '@angular/animations';
 
+export const fadeInState = state('fadeIn', style({opacity: 1}));
+export const fadeInEnter =  transition('* => fadeIn', [
+  style({ opacity: 0 }),
+  animate(300, style({ opacity: 1 }))
+]);
 const fadeEnter =  transition(':enter', [
   style({ opacity: 0 }),
   animate(300, style({ opacity: 1 }))
 ]);
 
-const fadeLeave = transition(':leave', [
+export const fadeOutState = state('fadeOut', style({opacity: 0}));
+export const fadeOutLeave = transition('fadeIn => fadeOut', [
   style({ opacity: 1 }),
   animate(400, style({ opacity: 0 }))
 ]);
+const fadeLeave =  transition(':leave', [
+  style({ opacity: 0 }),
+  animate(300, style({ opacity: 1 }))
+]);
 
 export const fadeIn = trigger('fadeIn', [
   fadeEnter

src/app/shared/animations/fromBottom.ts

@@ -0,0 +1,26 @@
+import { animate, state, style, transition, trigger } from '@angular/animations';
+
+export const fromBottomInState = state('fromBottomIn', style({opacity: 1, transform: 'translateY(0)'}));
+export const fromBottomEnter = transition('* => fromBottomIn', [
+  style({opacity: 0, transform: 'translateY(5%)'}),
+  animate('400ms ease-in-out')
+]);
+
+export const fromBottomOutState = state('fromBottomOut', style({opacity: 0, transform: 'translateY(-5%)'}));
+export const fromBottomLeave = transition('fromBottomIn => fromBottomOut', [
+  style({opacity: 1, transform: 'translateY(0)'}),
+  animate('300ms ease-in-out')
+]);
+
+export const fromBottomIn = trigger('fromBottomIn', [
+  fromBottomEnter
+]);
+
+export const fromBottomOut = trigger('fromBottomOut', [
+  fromBottomLeave
+]);
+
+export const fromBottomInOut = trigger('fromBottomInOut', [
+  fromBottomEnter,
+  fromBottomLeave
+]);

src/app/shared/animations/fromLeft.ts

@@ -0,0 +1,26 @@
+import { animate, state, style, transition, trigger } from '@angular/animations';
+
+export const fromLeftInState = state('fromLeftIn', style({opacity: 1, transform: 'translateX(0)'}));
+export const fromLeftEnter = transition('* => fromLeftIn', [
+  style({opacity: 0, transform: 'translateX(-5%)'}),
+  animate('400ms ease-in-out')
+]);
+
+export const fromLeftOutState = state('fromLeftOut', style({opacity: 0, transform: 'translateX(5%)'}));
+export const fromLeftLeave = transition('fromLeftIn => fromLeftOut', [
+  style({opacity: 1, transform: 'translateX(0)'}),
+  animate('300ms ease-in-out')
+]);
+
+export const fromLeftIn = trigger('fromLeftIn', [
+  fromLeftEnter
+]);
+
+export const fromLeftOut = trigger('fromLeftOut', [
+  fromLeftLeave
+]);
+
+export const fromLeftInOut = trigger('fromLeftInOut', [
+  fromLeftEnter,
+  fromLeftLeave
+]);

src/app/shared/animations/fromRight.ts

@@ -0,0 +1,26 @@
+import { animate, state, style, transition, trigger } from '@angular/animations';
+
+export const fromRightInState = state('fromRightIn', style({opacity: 1, transform: 'translateX(0)'}));
+export const fromRightEnter = transition('* => fromRightIn', [
+  style({opacity: 0, transform: 'translateX(5%)'}),
+  animate('400ms ease-in-out')
+]);
+
+export const fromRightOutState = state('fromRightOut', style({opacity: 0, transform: 'translateX(-5%)'}));
+export const fromRightLeave = transition('fromRightIn => fromRightOut', [
+  style({opacity: 1, transform: 'translateX(0)'}),
+  animate('300ms ease-in-out')
+]);
+
+export const fromRightIn = trigger('fromRightIn', [
+  fromRightEnter
+]);
+
+export const fromRightOut = trigger('fromRightOut', [
+  fromRightLeave
+]);
+
+export const fromRightInOut = trigger('fromRightInOut', [
+  fromRightEnter,
+  fromRightLeave
+]);

src/app/shared/animations/fromTop.ts

@@ -0,0 +1,26 @@
+import { animate, state, style, transition, trigger } from '@angular/animations';
+
+export const fromTopInState = state('fromTopIn', style({opacity: 1, transform: 'translateY(0)'}));
+export const fromTopEnter = transition('* => fromTopIn', [
+  style({opacity: 0, transform: 'translateY(-5%)'}),
+  animate('400ms ease-in-out')
+]);
+
+export const fromTopOutState = state('fromTopOut', style({opacity: 0, transform: 'translateY(5%)'}));
+export const fromTopLeave = transition('fromTopIn => fromTopOut', [
+  style({opacity: 1, transform: 'translateY(0)'}),
+  animate('300ms ease-in-out')
+]);
+
+export const fromTopIn = trigger('fromTopIn', [
+  fromTopEnter
+]);
+
+export const fromTopOut = trigger('fromTopOut', [
+  fromTopLeave
+]);
+
+export const fromTopInOut = trigger('fromTopInOut', [
+  fromTopEnter,
+  fromTopLeave
+]);

src/app/shared/animations/rotate.ts

@@ -0,0 +1,26 @@
+import { animate, state, style, transition, trigger } from '@angular/animations';
+
+export const rotateInState = state('rotateIn', style({opacity: 1, transform: 'rotate(0deg)'}));
+export const rotateEnter =  transition('* => rotateIn', [
+  style({opacity: 0, transform: 'rotate(5deg)'}),
+  animate('400ms ease-in-out')
+]);
+
+export const rotateOutState = state('rotateOut', style({opacity: 0, transform: 'rotate(5deg)'}));
+export const rotateLeave = transition('rotateIn => rotateOut', [
+  style({opacity: 1, transform: 'rotate(0deg)'}),
+  animate('400ms ease-in-out')
+]);
+
+export const rotateIn = trigger('rotateIn', [
+  rotateEnter
+]);
+
+export const rotateOut = trigger('rotateOut', [
+  rotateLeave
+]);
+
+export const rotateInOut = trigger('rotateInOut', [
+  rotateEnter,
+  rotateLeave
+]);

src/app/shared/animations/scale.ts

@@ -0,0 +1,26 @@
+import { animate, state, style, transition, trigger } from '@angular/animations';
+
+export const scaleInState = state('scaleIn', style({opacity: 1, transform: 'scale(1)'}));
+export const scaleEnter =  transition('* => scaleIn', [
+  style({opacity: 0, transform: 'scale(0)'}),
+  animate('400ms ease-in-out')
+]);
+
+export const scaleOutState = state('scaleOut', style({opacity: 0, transform: 'scale(0)'}));
+export const scaleLeave = transition('scaleIn => scaleOut', [
+  style({opacity: 1, transform: 'scale(1)'}),
+  animate('400ms ease-in-out')
+]);
+
+export const scaleIn = trigger('scaleIn', [
+  scaleEnter
+]);
+
+export const scaleOut = trigger('scaleOut', [
+  scaleLeave
+]);
+
+export const scaleInOut = trigger('scaleInOut', [
+  scaleEnter,
+  scaleLeave
+]);