Added action change animation

src/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.html

@@ -1,4 +1,6 @@
-<svg:rect [id]="id" [attr.rx]="rx"          [attr.ry]="ry"
+<svg:rect [@change]="animation"
+          (@change.done)="animationDone()"
+          [id]="id" [attr.rx]="rx"          [attr.ry]="ry"
                     [attr.height]="height"  [attr.width]="width"
                     [attr.fill]="fill"
 />

src/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.ts

@@ -1,4 +1,7 @@
-import {Component, Input, OnChanges, OnDestroy, OnInit, SimpleChange } from '@angular/core';
+import {
+    Component, Input, OnChanges, OnDestroy, OnInit, SimpleChange,
+    animate, group, style, transition, trigger
+} from '@angular/core';
 
 import { Store } from '@ngrx/store';
 
@@ -33,6 +36,18 @@ enum LabelTypes {
 }
 
 @Component({
+    animations: [
+        trigger('change', [
+            transition('inactive => active', [
+                style({fill: '#fff'}),
+                group([
+                    animate('1s ease-out', style({
+                        fill: '#333'
+                    }))
+                ])
+            ])
+        ])
+    ],
     selector: 'g[svg-keyboard-key]',
     template: require('./svg-keyboard-key.component.html'),
     styles: [require('./svg-keyboard-key.component.scss')]
@@ -45,15 +60,13 @@ export class SvgKeyboardKeyComponent implements OnInit, OnChanges, OnDestroy {
     @Input() width: number;
     @Input() keyAction: KeyAction;
 
-    /* tslint:disable:no-unused-variable */
+    enumLabelTypes = LabelTypes;
-    /* It is used in the template */
-    private enumLabelTypes = LabelTypes;
-    /* tslint:enable:no-unused-variable */
 
     private labelSource: any;
     private labelType: LabelTypes;
     private macros: Macro[];
     private subscription: Subscription;
+    private animation: string = 'inactive';
 
     constructor(private mapperService: MapperService, private store: Store<AppState>) {
         this.subscription = store.let(getMacroEntities())
@@ -68,6 +81,7 @@ export class SvgKeyboardKeyComponent implements OnInit, OnChanges, OnDestroy {
         /* tslint:disable:no-string-literal */
         if (changes['keyAction']) {
             this.setLabels();
+            this.animation = 'active';
         }
         /* tslint:enable:no-string-literal */
     }
@@ -76,6 +90,10 @@ export class SvgKeyboardKeyComponent implements OnInit, OnChanges, OnDestroy {
         this.subscription.unsubscribe();
     }
 
+    animationDone() {
+        this.animation = 'inactive';
+    }
+
     private setLabels(): void {
         if (!this.keyAction) {
             this.labelSource = undefined;