Fix keyboard animation

src/components/svg/wrap/animation.ts

@@ -1,5 +1,4 @@
 export type AnimationKeyboard =
-    'none' |
     'leftIn' |
     'leftOut' |
     'rightIn' |

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, rightIn', style({
-            state('leftIn', 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('leftOut => leftIn, rightOut => leftIn', [
-            transition('none => leftIn, leftOut => leftIn', [
+                animate('400ms ease-out', keyframes([
-                style({
+                    style({ transform: 'translateX(0%)', left: '101%', offset: 0 }),
-                    opacity: 0,
+                    style({ transform: 'translateX(-50%)', left: '50%', offset: 1 })
-                    transform: 'translateX(0%)',
+                ]))
-                    left: '101%'
-                }),
-                style({
-                    opacity: 1
-                }),
-                animate('400ms ease-out')
             ]),
-            transition('* => none', [
+            transition('leftIn => leftOut, rightIn => leftOut', [
-                style({
+                animate('400ms ease-out', keyframes([
-                    opacity: 0,
+                    style({ transform: 'translateX(-50%)', left: '50%', offset: 0 }),
-                    transform: 'translateX(-101%)',
+                    style({ transform: 'translateX(-101%)', left: '0%', offset: 1 })
-                    left: '0'
+                ]))
-                }),
-                style({
-                    opacity: 1
-                })
             ]),
-            transition('none => rightIn, rightOut => rightIn', [
+            transition('* => rightIn', [
-                style({
+                animate('400ms ease-out', keyframes([
-                    opacity: 0,
+                    style({ transform: 'translateX(-101%)', left: '0%', offset: 0 }),
-                    transform: 'translateX(-101%)',
+                    style({ transform: 'translateX(-50%)', left: '50%', offset: 1 })
-                    left: '0'
+                ]))
-                }),
-                style({
-                    opacity: 1
-                }),
-                animate('400ms ease-out')
             ]),
-            transition(
+            transition('* => rightOut', [
-                'leftIn => leftOut,' +
+                animate('400ms ease-out', keyframes([
-                'rightIn => rightOut,' +
+                    style({ transform: 'translateX(-50%)', left: '50%', offset: 0 }),
-                'leftIn <=> rightOut,' +
+                    style({ transform: 'translateX(0%)', left: '101%', offset: 1 })
-                'rightIn <=> leftOut',
+                ]))
-                animate('400ms ease-out')
+            ])
-            )
         ])
     ]
 })
@@ -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']) {

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));