fix: only animate keyboard separator when splitting (#696)

packages/uhk-web/src/app/components/svg/keyboard/svg-keyboard.component.html

@@ -17,7 +17,7 @@
            (keyHover)="onKeyHover($event.index, $event.event, $event.over, i)"
            (capture)="onCapture(i, $event.index, $event.captured)" />
 
-    <svg:path [ngClass]="{'separator-visible': !halvesSplit, 'separator-hide': halvesSplit}"
+    <svg:path [@fadeSeparator]="separatorAnimation"
               [attr.d]="separator.d"
               [attr.style]="separatorStyle" />
 </svg>

packages/uhk-web/src/app/components/svg/keyboard/svg-keyboard.component.scss

@@ -8,33 +8,3 @@ editable-text {
     padding-right: 2em;
     display: block;
 }
-
-.separator-visible {
-    animation: visible-fade-in 1.5s;
-    opacity: 1;
-}
-
-@keyframes visible-fade-in {
-    0% {
-        opacity: 0;
-    }
-
-    100% {
-        opacity: 1;
-    }
-}
-
-.separator-hide {
-    animation: visible-fade-out 1.5s;
-    opacity: 0;
-}
-
-@keyframes visible-fade-out {
-    0% {
-        opacity: 1;
-    }
-
-    100% {
-        opacity: 0;
-    }
-}

packages/uhk-web/src/app/components/svg/keyboard/svg-keyboard.component.ts

@@ -22,6 +22,16 @@ import { SvgSeparator } from '../separator';
                 transform: 'translate(3%, 15%) rotate(-4deg) scale(0.92, 0.92)'
             })),
             transition('* <=> *', animate(500))
+        ]),
+        trigger('fadeSeparator', [
+            state('visible', style({
+                opacity: 1
+            })),
+            state('invisible', style({
+                opacity: 0
+            })),
+            transition('visible => invisible', animate(500)),
+            transition('invisible => visible', animate(1500))
         ])
     ]
 })
@@ -45,6 +55,7 @@ export class SvgKeyboardComponent implements OnInit {
     moduleAnimationStates: string[];
     separator: SvgSeparator;
     separatorStyle: SafeStyle;
+    separatorAnimation = 'visible';
 
     constructor(private svgModuleProvider: SvgModuleProviderService,
                 private sanitizer: DomSanitizer) {
@@ -96,8 +107,10 @@ export class SvgKeyboardComponent implements OnInit {
     private updateModuleAnimationStates() {
         if (this.halvesSplit) {
             this.moduleAnimationStates = ['rotateRight', 'rotateLeft'];
+            this.separatorAnimation = 'invisible';
         } else {
             this.moduleAnimationStates = [];
+            this.separatorAnimation = 'visible';
         }
     }