Refactored notification animations

src/app/shared/notifications/notification/notification.component.ts

@@ -9,100 +9,31 @@ import {
   TemplateRef,
   ViewEncapsulation
 } from '@angular/core';
-import { animate, state, style, transition, trigger } from '@angular/animations';
+import { trigger } from '@angular/animations';
 import { DomSanitizer } from '@angular/platform-browser';
 import { NotificationsService } from '../notifications.service';
 import { INotification } from '../models/notification.model';
+import { scaleEnter, scaleInState, scaleLeave, scaleOutState } from '../../animations/scale';
+import { rotateEnter, rotateInState, rotateLeave, rotateOutState } from '../../animations/rotate';
+import { fromBottomEnter, fromBottomInState, fromBottomLeave, fromBottomOutState } from '../../animations/fromBottom';
+import { fromRightEnter, fromRightInState, fromRightLeave, fromRightOutState } from '../../animations/fromRight';
+import { fromLeftEnter, fromLeftInState, fromLeftLeave, fromLeftOutState } from '../../animations/fromLeft';
+import { fromTopEnter, fromTopInState, fromTopLeave, fromTopOutState } from '../../animations/fromTop';
+import { fadeEnter, fadeInEnter, fadeInState, fadeLeave, fadeOutLeave, fadeOutState } from '../../animations/fade';
+import { NotificationAnimationsStatus } from '../models/notification-animations-type';
 
 @Component({
   selector: 'ds-notification',
   encapsulation: ViewEncapsulation.None,
   animations: [
     trigger('enterLeave', [
-
-      // Fade
-      state('fade', style({opacity: 1})),
-      transition('* => fade', [
-        style({opacity: 0}),
-        animate('400ms ease-in-out')
-      ]),
-      state('fadeOut', style({opacity: 0})),
-      transition('fade => fadeOut', [
-        style({opacity: 1}),
-        animate('300ms ease-in-out')
-      ]),
-
-      // Enter from top
-      state('fromTop', style({opacity: 1, transform: 'translateY(0)'})),
-      transition('* => fromTop', [
-        style({opacity: 0, transform: 'translateY(-5%)'}),
-        animate('400ms ease-in-out')
-      ]),
-      state('fromTopOut', style({opacity: 0, transform: 'translateY(5%)'})),
-      transition('fromTop => fromTopOut', [
-        style({opacity: 1, transform: 'translateY(0)'}),
-        animate('300ms ease-in-out')
-      ]),
-
-      // Enter from right
-      state('fromRight', style({opacity: 1, transform: 'translateX(0)'})),
-      transition('* => fromRight', [
-        style({opacity: 0, transform: 'translateX(5%)'}),
-        animate('400ms ease-in-out')
-      ]),
-      state('fromRightOut', style({opacity: 0, transform: 'translateX(-5%)'})),
-      transition('fromRight => fromRightOut', [
-        style({opacity: 1, transform: 'translateX(0)'}),
-        animate('300ms ease-in-out')
-      ]),
-
-      // Enter from bottom
-      state('fromBottom', style({opacity: 1, transform: 'translateY(0)'})),
-      transition('* => fromBottom', [
-        style({opacity: 0, transform: 'translateY(5%)'}),
-        animate('400ms ease-in-out')
-      ]),
-      state('fromBottomOut', style({opacity: 0, transform: 'translateY(-5%)'})),
-      transition('fromBottom => fromBottomOut', [
-        style({opacity: 1, transform: 'translateY(0)'}),
-        animate('300ms ease-in-out')
-      ]),
-
-      // Enter from left
-      state('fromLeft', style({opacity: 1, transform: 'translateX(0)'})),
-      transition('* => fromLeft', [
-        style({opacity: 0, transform: 'translateX(-5%)'}),
-        animate('400ms ease-in-out')
-      ]),
-      state('fromLeftOut', style({opacity: 0, transform: 'translateX(5%)'})),
-      transition('fromLeft => fromLeftOut', [
-        style({opacity: 1, transform: 'translateX(0)'}),
-        animate('300ms ease-in-out')
-      ]),
-
-      // Rotate
-      state('scale', style({opacity: 1, transform: 'scale(1)'})),
-      transition('* => scale', [
-        style({opacity: 0, transform: 'scale(0)'}),
-        animate('400ms ease-in-out')
-      ]),
-      state('scaleOut', style({opacity: 0, transform: 'scale(0)'})),
-      transition('scale => scaleOut', [
-        style({opacity: 1, transform: 'scale(1)'}),
-        animate('400ms ease-in-out')
-      ]),
-
-      // Scale
-      state('rotate', style({opacity: 1, transform: 'rotate(0deg)'})),
-      transition('* => rotate', [
-        style({opacity: 0, transform: 'rotate(5deg)'}),
-        animate('400ms ease-in-out')
-      ]),
-      state('rotateOut', style({opacity: 0, transform: 'rotate(-5deg)'})),
-      transition('rotate => rotateOut', [
-        style({opacity: 1, transform: 'rotate(0deg)'}),
-        animate('400ms ease-in-out')
-      ]),
+      fadeInEnter, fadeInState, fadeOutLeave, fadeOutState,
+      fromBottomEnter, fromBottomInState, fromBottomLeave, fromBottomOutState,
+      fromRightEnter, fromRightInState, fromRightLeave, fromRightOutState,
+      fromLeftEnter, fromLeftInState, fromLeftLeave, fromLeftOutState,
+      fromTopEnter, fromTopInState, fromTopLeave, fromTopOutState,
+      rotateInState, rotateEnter, rotateOutState, rotateLeave,
+      scaleInState, scaleEnter, scaleOutState, scaleLeave
     ])
   ],
   templateUrl: './notification.component.html',
@@ -112,16 +43,6 @@ import { INotification } from '../models/notification.model';
 
 export class NotificationComponent implements OnInit, OnDestroy {
 
-  // @Input() public timeOut: number;
-  // @Input() public showProgressBar: boolean;
-  // @Input() public pauseOnHover: boolean;
-  // @Input() public clickToClose: boolean;
-  // @Input() public clickIconToClose: boolean;
-  // @Input() public maxLength: number;
-  // @Input() public theClass: string;
-  // @Input() public rtl: boolean;
-  // @Input() public animate: string;
-  // @Input() public position: number;
   @Input() public item: INotification;
 
   // Progress bar variables
@@ -143,8 +64,8 @@ export class NotificationComponent implements OnInit, OnDestroy {
   private start: any;
   private diff: any;
 
-  // 'fade' | 'fromTop' | 'fromRight' | 'fromBottom' | 'fromLeft' | 'rotate' | 'scale' = 'fromRight';
-  public animate = 'rotate';
+  // 'fade' | 'fromTop' | 'fromRight' | 'fromBottom' | 'fromLeft' | 'rotate' | 'scale' ;
+  public animate: string;
 
   constructor(private notificationService: NotificationsService,
               private domSanitizer: DomSanitizer,
@@ -153,7 +74,7 @@ export class NotificationComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit(): void {
-    this.animate = this.item.options.animate;
+    this.animate = this.item.options.animate + NotificationAnimationsStatus.In;
 
     if (this.item.options.timeOut !== 0) {
       this.startTimeOut();
@@ -193,10 +114,10 @@ export class NotificationComponent implements OnInit, OnDestroy {
 
   private remove() {
     if (this.animate) {
-      // this.animate = this.animate + 'Out';
+      this.setAnimationOut();
       setTimeout(() => {
         this.notificationService.remove(this.item);
-      }, 310);
+      }, 1000);
     } else {
       this.notificationService.remove(this.item);
     }
@@ -212,7 +133,8 @@ export class NotificationComponent implements OnInit, OnDestroy {
     this[key + 'IsTemplate'] = item instanceof TemplateRef;
   }
 
-  // setAnimationOut() {
-  //   this.animate = this.animate + 'Out';
-  // }
+  setAnimationOut() {
+    this.animate = this.item.options.animate + NotificationAnimationsStatus.Out;
+    this.cdr.detectChanges();
+  }
 }