Popover Animation

src/components/popover/popover.component.html

@@ -1,6 +1,7 @@
 <div class="popover"
      #popover
-     [ngClass]="{'display': visible, 'leftArrow': leftArrow, 'rightArrow': rightArrow}"
+     [@popover]="animationState"
+     [ngClass]="{'leftArrow': leftArrow, 'rightArrow': rightArrow}"
      [style.top.px]="topPosition"
      [style.left.px]="leftPosition"
 >

src/components/popover/popover.component.scss

@@ -4,16 +4,8 @@
     padding: 0;
     max-width: 568px;
     width: 100%;
-    transform: translateX(-50%);
-    visibility: hidden;
-
-    &.display {
-        visibility: visible;
-    }
 
     &.leftArrow {
-        transform: none;
-
         .arrowCustom {
             transform: none;
             left: 22px;
@@ -21,8 +13,6 @@
     }
 
     &.rightArrow {
-        transform: none;
-
         .arrowCustom {
             transform: none;
             right: 22px;
@@ -108,13 +98,17 @@
 .popover-overlay {
     position: fixed;
     width: 100%;
-    height: 100%;
+    height: 0;
     top: 0;
     left: 0;
-    display: none;
+    z-index: 1050;
+    background: rgba(0, 0, 0, 0);
+    transition: background 200ms ease-out, height 0ms 200ms linear;
 
     &.display {
-        display: block;
+        height: 100%;
+        background: rgba(0, 0, 0, 0.2);
+        transition: background 200ms ease-out;
     }
 }
 

src/components/popover/popover.component.ts

@@ -1,5 +1,6 @@
 import {
-    Component, ElementRef, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewChild
+    Component, ElementRef, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewChild, animate, keyframes,
+    state, style, transition, trigger
 } from '@angular/core';
 
 import { Store } from '@ngrx/store';
@@ -32,7 +33,33 @@ enum TabName {
 @Component({
     selector: 'popover',
     template: require('./popover.component.html'),
-    styles: [require('./popover.component.scss')]
+    styles: [require('./popover.component.scss')],
+    animations: [
+        trigger('popover', [
+            state('closed', style({
+                transform: 'translateY(30px)',
+                visibility: 'hidden',
+                opacity: 0
+            })),
+            state('opened', style({
+                transform: 'translateY(0)',
+                visibility: 'visible',
+                opacity: 1
+            })),
+            transition('opened => closed', [
+                animate('200ms ease-out', keyframes([
+                    style({ transform: 'translateY(0)', visibility: 'visible', opacity: 1, offset: 0 }),
+                    style({ transform: 'translateY(30px)', visibility: 'hidden', opacity: 0 , offset: 1 })
+                ]))
+            ]),
+            transition('closed => opened', [
+                animate('200ms ease-out', keyframes([
+                    style({ transform: 'translateY(30px)', visibility: 'visible', opacity: 0, offset: 0 }),
+                    style({ transform: 'translateY(0)', visibility: 'visible', opacity: 1, offset: 1 })
+                ]))
+            ])
+        ])
+    ]
 })
 export class PopoverComponent implements OnChanges {
     @Input() defaultKeyAction: KeyAction;
@@ -54,8 +81,10 @@ export class PopoverComponent implements OnChanges {
     private rightArrow: boolean = false;
     private topPosition: number = 0;
     private leftPosition: number = 0;
+    private animationState: string;
 
     constructor(private store: Store<AppState>) {
+        this.animationState = 'closed';
         this.keymaps$ = store.let(getKeymapEntities())
             .map((keymaps: Keymap[]) =>
                 keymaps.filter((keymap: Keymap) => this.currentKeymap.abbreviation !== keymap.abbreviation)
@@ -86,6 +115,14 @@ export class PopoverComponent implements OnChanges {
 
             this.selectTab(tab);
         }
+
+        if (change['visible']) {
+            if (change['visible'].currentValue) {
+                this.animationState = 'opened';
+            } else {
+                this.animationState = 'closed';
+            }
+        }
     }
 
     onCancelClick(): void {
@@ -112,15 +149,18 @@ export class PopoverComponent implements OnChanges {
 
     private calculatePosition() {
         const offsetLeft: number = this.wrapPosition.left + 265;
+        const popover: HTMLElement = this.popoverHost.nativeElement;
         let newLeft: number = this.keyPosition.left + (this.keyPosition.width / 2);
 
         this.leftArrow = newLeft <  offsetLeft;
-        this.rightArrow = (newLeft + this.popoverHost.nativeElement.offsetWidth) > offsetLeft + this.wrapPosition.width;
+        this.rightArrow = (newLeft + popover.offsetWidth) > offsetLeft + this.wrapPosition.width;
 
         if (this.leftArrow) {
             newLeft = this.keyPosition.left;
         } else if (this.rightArrow) {
-            newLeft = this.keyPosition.left - this.popoverHost.nativeElement.offsetWidth + this.keyPosition.width;
+            newLeft = this.keyPosition.left - popover.offsetWidth + this.keyPosition.width;
+        } else {
+            newLeft -= popover.offsetWidth / 2;
         }
 
         this.topPosition = this.keyPosition.top + this.keyPosition.height + 7;

src/components/svg/wrap/svg-keyboard-wrap.component.scss

@@ -9,6 +9,7 @@ svg-keyboard {
     position: absolute;
     left: 0;
     transform: translateX(-101%);
+    user-select: none;
 }
 
 .keyboard-slider {

src/components/svg/wrap/svg-keyboard-wrap.component.ts

@@ -108,9 +108,14 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
     private keyElement: HTMLElement;
 
     @HostListener('window:resize')
-    onClick() {
+    onResize() {
-        this.wrapPosition = this.wrapHost.getBoundingClientRect();
+        if (this.wrapHost) {
-        this.keyPosition = this.keyElement.getBoundingClientRect();
+            this.wrapPosition = this.wrapHost.getBoundingClientRect();
+        }
+
+        if (this.keyElement) {
+            this.keyPosition = this.keyElement.getBoundingClientRect();
+        }
     }
 
     constructor(private store: Store<AppState>, private mapper: MapperService, private element: ElementRef) {