fix(anim): Remove welcome class animation

Removes the class animation and respective code for the input element to keep the example simple

src/welcome.html

@@ -5,7 +5,7 @@ <h2>${heading}</h2>
     <form role="form" submit.delegate="welcome()">
       <div class="form-group">
         <label for="fn">First Name</label>
-        <input type="text" value.bind="firstName" ref="elFirstName" class="form-control" id="fn" placeholder="first name">
+        <input type="text" value.bind="firstName" class="form-control" id="fn" placeholder="first name">
       </div>
       <div class="form-group">
         <label for="ln">Last Name</label>

src/welcome.js

@@ -1,16 +1,10 @@
-import {inject, computedFrom} from 'aurelia-framework';
-import {CssAnimator} from 'aurelia-animator-css';
+import {computedFrom} from 'aurelia-framework';
 
-@inject(CssAnimator)
 export class Welcome{
   heading = 'Welcome to the Aurelia Navigation App!';
   firstName = 'John';
   lastName = 'Doe';
 
-  constructor(animator) {
-    this.animator = animator;
-  }
-
   //Getters can't be observed with Object.observe, so they must be dirty checked.
   //However, if you tell Aurelia the dependencies, it no longer needs to dirty check the property.
   //To optimize by declaring the properties that this getter is computed from, uncomment the line below.
@@ -20,12 +14,7 @@ export class Welcome{
   }
 
   welcome(){
-    if(this.firstName === '') {
-      this.animator.addClass(this.elFirstName, 'input-error');
-    } else {
-      this.animator.removeClass(this.elFirstName, 'input-error');
-      alert(`Welcome, ${this.fullName}!`);
-    }
+    alert(`Welcome, ${this.fullName}!`);
   }
 }
 

styles/styles.css

@@ -57,14 +57,6 @@ section.au-enter-active {
   animation: bounce 1s;
 }
 
-#fn.input-error {
-  border: 1px solid darkred;
-}
-#fn.input-error-add {
-  -webkit-animation: shake 1s;
-  animation: shake 1s;
-}
-
 
 /* animation definitions */
 @-webkit-keyframes fadeInRight {
@@ -149,49 +141,3 @@ section.au-enter-active {
     transform: translate3d(0, -4px, 0)
   }
 }
-
-@-webkit-keyframes shake {
-  0%, 100% {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0)
-  }
-  10%,
-  30%,
-  50%,
-  70%,
-  90% {
-    -webkit-transform: translate3d(-10px, 0, 0);
-    transform: translate3d(-10px, 0, 0)
-  }
-  20%,
-  40%,
-  60%,
-  80% {
-    -webkit-transform: translate3d(10px, 0, 0);
-    transform: translate3d(10px, 0, 0)
-  }
-}
-@keyframes shake {
-  0%, 100% {
-    -webkit-transform: translate3d(0, 0, 0);
-    -ms-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0)
-  }
-  10%,
-  30%,
-  50%,
-  70%,
-  90% {
-    -webkit-transform: translate3d(-10px, 0, 0);
-    -ms-transform: translate3d(-10px, 0, 0);
-    transform: translate3d(-10px, 0, 0)
-  }
-  20%,
-  40%,
-  60%,
-  80% {
-    -webkit-transform: translate3d(10px, 0, 0);
-    -ms-transform: translate3d(10px, 0, 0);
-    transform: translate3d(10px, 0, 0)
-  }
-}