refactor(animations): inline css animations

ionic/components/app/test/animations/index.ts

@@ -0,0 +1,31 @@
+import {App, Page, Animation} from 'ionic/ionic';
+
+
+@Page({
+  templateUrl: 'main.html'
+})
+class E2EPage {
+
+  constructor() {
+    this.duration = '1000';
+    this.easing = 'ease-in-out';
+  }
+
+  playGreen() {
+    let a = new Animation('.green');
+    a.fromTo('translateX', '0px', '200px');
+    a.duration(parseInt(this.duration));
+    a.easing(this.easing);
+    a.play();
+  }
+}
+
+
+@App({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+class E2EApp {
+  constructor() {
+    this.root = E2EPage;
+  }
+}

ionic/components/app/test/animations/main.html

@@ -0,0 +1,33 @@
+<ion-navbar *navbar>
+  <ion-title>Animations</ion-title>
+</ion-navbar>
+
+<ion-content>
+
+  <div style="position:relative; margin: 20px auto; width: 250px; height: 50px; background: #ddd;">
+
+    <div class="green" style="position:absolute; height: 50px; width: 50px; background:green;"></div>
+
+  </div>
+
+  <ion-list>
+    <ion-item>
+      <ion-label>Duration:</ion-label>
+      <ion-input [(ngModel)]="duration"></ion-input>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Easing</ion-label>
+      <ion-select [(ngModel)]="easing">
+        <ion-option value="linear"></ion-option>
+        <ion-option value="ease-in-out"></ion-option>
+        <ion-option value="cubic-bezier(0.36,0.66,0.04,1)"></ion-option>
+      </ion-select>
+    </ion-item>
+
+    <button ion-item (click)="playGreen()">
+      Play
+    </button>
+  </ion-list>
+
+</ion-content>