Fix animation for rc5. Port animation examples too.

Author: hdeshev

nativescript-angular/animation-player.ts

@@ -13,6 +13,7 @@ export class NativeScriptAnimationPlayer implements AnimationPlayer {
 
     private _subscriptions: Function[] = [];
     private _finished = false;
+    private _started = false;
     private animation: KeyframeAnimation;
     private target: View;
 
@@ -64,11 +65,10 @@ export class NativeScriptAnimationPlayer implements AnimationPlayer {
     }
 
     init(): void {
-        throw new Error("Not implemented.");
     }
 
     hasStarted(): boolean {
-        throw new Error("Not implemented.");
+        return this._started;
     }
 
 
@@ -77,13 +77,15 @@ export class NativeScriptAnimationPlayer implements AnimationPlayer {
     private _onFinish() {
         if (!this._finished) {
             this._finished = true;
+            this._started = false;
             this._subscriptions.forEach(fn => fn());
             this._subscriptions = [];
         }
     }
 
     play(): void {
         if (this.animation) {
+            this._started = true;
             this.animation.play(this.target)
                 .then(() => { this._onFinish(); })
                 .catch((e) => { });

ng-sample/app/app.ts

@@ -76,6 +76,7 @@ function makeExampleModule(componentType) {
     if (componentType.entries) {
         entries = componentType.entries;
     }
+    entries.push(componentType);
     let providers = [];
     if (componentType.providers) {
         providers = componentType.providers
@@ -106,7 +107,12 @@ function makeExampleModule(componentType) {
 //platformNativeScriptDynamic().bootstrapModule(makeExampleModule(PageRouterOutletAppComponent));
 //platformNativeScriptDynamic().bootstrapModule(makeExampleModule(PageRouterOutletNestedAppComponent));
 //platformNativeScriptDynamic().bootstrapModule(makeExampleModule(ClearHistoryAppComponent));
-platformNativeScriptDynamic().bootstrapModule(makeExampleModule(LoginAppComponent));
+//platformNativeScriptDynamic().bootstrapModule(makeExampleModule(LoginAppComponent));
+//animations
+//platformNativeScriptDynamic().bootstrapModule(makeExampleModule(AnimationStatesTest));
+//platformNativeScriptDynamic().bootstrapModule(makeExampleModule(AnimationNgClassTest));
+//platformNativeScriptDynamic().bootstrapModule(makeExampleModule(AnimationKeyframesTest));
+platformNativeScriptDynamic().bootstrapModule(makeExampleModule(AnimationEnterLeaveTest));
 
 // Livesync test
 // var cahcedUrl: string;
@@ -129,9 +135,3 @@ platformNativeScriptDynamic().bootstrapModule(makeExampleModule(LoginAppComponen
 // });
 
 // nativeScriptBootstrap(LivesyncApp, [LivesyncTestRouterProviders]);
-
-// animations
-//nativeScriptBootstrap(AnimationStatesTest);
-//nativeScriptBootstrap(AnimationNgClassTest);
-//nativeScriptBootstrap(AnimationKeyframesTest);
-//nativeScriptBootstrap(AnimationEnterLeaveTest);

ng-sample/app/examples/animation/animation-enter-leave-test.html

@@ -3,7 +3,7 @@
     <Button text="Remove All" (tap)="onRemoveAllTap()"></Button>
     <ScrollView>
         <StackLayout>
-            <Button *ngFor="let item of items" @state="'in'" text="{{ item }}" class="button" (tap)="onItemTap($event)"></Button>
+          <Button *ngFor="let item of items" [@state]="'in'" text="{{ item }}" class="button" (tap)="onItemTap($event)"></Button>
         </StackLayout>
     </ScrollView>
-</StackLayout>
+</StackLayout>

ng-sample/app/examples/animation/animation-keyframes-test.ts

@@ -4,7 +4,7 @@ import {Component, trigger, style, animate, state, transition, keyframes } from
     selector: 'animation-states',
     template: `
         <StackLayout>
-            <Button text="Touch me!" @state=" isOn ? 'active' : 'inactive' " (tap)="onTap()"></Button>
+            <Button text="Touch me!" [@state]=" isOn ? 'active' : 'inactive' " (tap)="onTap()"></Button>
         </StackLayout>`,
     animations: [
         trigger('state', [

ng-sample/app/examples/animation/animation-ngclass-test.ts

@@ -3,8 +3,8 @@ import {Observable} from "data/observable";
 
 @Component({
     selector: "main-component",
-    templateUrl: "./examples/animation/animation-ngClass-test.html",
-    styleUrls: [ "./examples/animation/animation-ngClass-test.css" ]
+    templateUrl: "./examples/animation/animation-ngclass-test.html",
+    styleUrls: [ "./examples/animation/animation-ngclass-test.css" ]
 })
 export class AnimationNgClassTest {
 
@@ -20,4 +20,4 @@ export class AnimationNgClassTest {
             this.text = "Normal";
         }
     }
-}
+}

ng-sample/app/examples/animation/animation-states-test.ts

@@ -4,7 +4,7 @@ import {Component, trigger, style, animate, state, transition } from '@angular/c
     selector: 'animation-states',
     template: `
         <StackLayout>
-            <Button text="Touch me!" @state=" isOn ? 'active' : 'inactive' " (tap)="onTap()"></Button>
+            <Button text="Touch me!" [@state]=" isOn ? 'active' : 'inactive' " (tap)="onTap()"></Button>
         </StackLayout>`,
     animations: [
         trigger('state', [