From f68a7f155ca69a2799e2c80991309597df38055b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Farkas=20J=C3=B3zsef?= <fjozsef001@gmail.com>
Date: Wed, 23 Nov 2016 20:19:54 +0100
Subject: [PATCH] Fix keyboard animation

---
 src/components/svg/wrap/animation.ts          |  1 -
 .../svg/wrap/svg-keyboard-wrap.component.ts   | 71 +++++++------------
 src/config-serializer/config-items/Layer.ts   |  1 -
 3 files changed, 25 insertions(+), 48 deletions(-)

diff --git a/src/components/svg/wrap/animation.ts b/src/components/svg/wrap/animation.ts
index cca88c8c..8d60d48b 100644
--- a/src/components/svg/wrap/animation.ts
+++ b/src/components/svg/wrap/animation.ts
@@ -1,5 +1,4 @@
 export type AnimationKeyboard =
-    'none' |
     'leftIn' |
     'leftOut' |
     'rightIn' |
diff --git a/src/components/svg/wrap/svg-keyboard-wrap.component.ts b/src/components/svg/wrap/svg-keyboard-wrap.component.ts
index 151292ef..7ec54957 100644
--- a/src/components/svg/wrap/svg-keyboard-wrap.component.ts
+++ b/src/components/svg/wrap/svg-keyboard-wrap.component.ts
@@ -4,6 +4,7 @@ import {
     OnChanges,
     SimpleChanges,
     animate,
+    keyframes,
     state,
     style,
     transition,
@@ -47,8 +48,7 @@ import { KeymapActions } from '../../../store/actions';
     // We use 101%, because there was still a trace of the keyboard in the screen when animation was done
     animations: [
         trigger('layerState', [
-            /* Right -> Left animation*/
-            state('leftIn', style({
+            state('leftIn, rightIn', style({
                 transform: 'translateX(-50%)',
                 left: '50%'
             })),
@@ -56,55 +56,34 @@ import { KeymapActions } from '../../../store/actions';
                 transform: 'translateX(-101%)',
                 left: '0'
             })),
-            /* Right -> Left animation */
-            state('rightIn', style({
-                transform: 'translateX(-50%)',
-                left: '50%'
-            })),
             state('rightOut', style({
-                transform: 'translateX(0%)',
+                transform: 'translateX(0)',
                 left: '101%'
             })),
-            /* Transitions */
-            transition('none => leftIn, leftOut => leftIn', [
-                style({
-                    opacity: 0,
-                    transform: 'translateX(0%)',
-                    left: '101%'
-                }),
-                style({
-                    opacity: 1
-                }),
-                animate('400ms ease-out')
+            transition('leftOut => leftIn, rightOut => leftIn', [
+                animate('400ms ease-out', keyframes([
+                    style({ transform: 'translateX(0%)', left: '101%', offset: 0 }),
+                    style({ transform: 'translateX(-50%)', left: '50%', offset: 1 })
+                ]))
             ]),
-            transition('* => none', [
-                style({
-                    opacity: 0,
-                    transform: 'translateX(-101%)',
-                    left: '0'
-                }),
-                style({
-                    opacity: 1
-                })
+            transition('leftIn => leftOut, rightIn => leftOut', [
+                animate('400ms ease-out', keyframes([
+                    style({ transform: 'translateX(-50%)', left: '50%', offset: 0 }),
+                    style({ transform: 'translateX(-101%)', left: '0%', offset: 1 })
+                ]))
             ]),
-            transition('none => rightIn, rightOut => rightIn', [
-                style({
-                    opacity: 0,
-                    transform: 'translateX(-101%)',
-                    left: '0'
-                }),
-                style({
-                    opacity: 1
-                }),
-                animate('400ms ease-out')
+            transition('* => rightIn', [
+                animate('400ms ease-out', keyframes([
+                    style({ transform: 'translateX(-101%)', left: '0%', offset: 0 }),
+                    style({ transform: 'translateX(-50%)', left: '50%', offset: 1 })
+                ]))
             ]),
-            transition(
-                'leftIn => leftOut,' +
-                'rightIn => rightOut,' +
-                'leftIn <=> rightOut,' +
-                'rightIn <=> leftOut',
-                animate('400ms ease-out')
-            )
+            transition('* => rightOut', [
+                animate('400ms ease-out', keyframes([
+                    style({ transform: 'translateX(-50%)', left: '50%', offset: 0 }),
+                    style({ transform: 'translateX(0%)', left: '101%', offset: 1 })
+                ]))
+            ])
         ])
     ]
 })
@@ -141,7 +120,7 @@ export class SvgKeyboardWrapComponent implements OnChanges {
             this.popoverShown = false;
 
             if (this.layers.length > 0) {
-                this.layers.forEach(element => element.animation = 'none');
+                this.layers.forEach(element => element.animation = 'leftOut');
                 this.layers[0].animation = 'leftIn';
             }
         } else if (changes['keymap']) {
diff --git a/src/config-serializer/config-items/Layer.ts b/src/config-serializer/config-items/Layer.ts
index 97e0ac9f..81a3ad32 100644
--- a/src/config-serializer/config-items/Layer.ts
+++ b/src/config-serializer/config-items/Layer.ts
@@ -11,7 +11,6 @@ export class Layer extends Serializable<Layer> {
     constructor(layers?: Layer) {
         super();
         if (!layers) {
-            this.animation = 'none';
             return;
         }
         this.modules = layers.modules.map(module => new Module(module));