Inital animations were not played in android, since CSS in android is now applied before the native view is created/assigned

PanayotCankov · PanayotCankov · commit 108f4c287d2e · 2017-04-12T10:40:45.000+03:00
diff --git a/tns-core-modules/ui/core/view-base/view-base.ts b/tns-core-modules/ui/core/view-base/view-base.ts
@@ -608,13 +608,19 @@ export abstract class ViewBase extends Observable implements ViewBaseDefinition
     }
 
     public initNativeView(): void {
-        //
+        // No initNativeView(this)?
+        if (this._cssState) {
+            this._cssState.playPendingKeyframeAnimations();
+        }
     }
 
     public resetNativeView(): void {
         if (this.nativeView && this.recycleNativeView && isAndroid) {
             resetNativeView(this);
         }
+        if (this._cssState) {
+            this._cancelAllAnimations();
+        }
     }
 
     public _setupUI(context: android.content.Context, atIndex?: number, parentIsLoaded?: boolean) {
diff --git a/tns-core-modules/ui/styling/style-scope.ts b/tns-core-modules/ui/styling/style-scope.ts
@@ -86,6 +86,8 @@ if (application.hasLaunched()) {
 }
 
 export class CssState {
+    private _pendingKeyframeAnimations: SelectorCore[];
+
     constructor(private view: ViewBase, private match: SelectorsMatch<ViewBase>) {
     }
 
@@ -103,7 +105,15 @@ export class CssState {
         }
 
         matchingSelectors.forEach(s => this.applyDescriptors(s.ruleset));
-        matchingSelectors.forEach(s => this.playKeyframeAnimations(s.ruleset));
+        this._pendingKeyframeAnimations = matchingSelectors;
+        this.playPendingKeyframeAnimations();
+    }
+
+    public playPendingKeyframeAnimations() {
+        if (this._pendingKeyframeAnimations && this.view.nativeView) {
+            this._pendingKeyframeAnimations.forEach(s => this.playKeyframeAnimationsFromRuleSet(s.ruleset));
+            this._pendingKeyframeAnimations = null;
+        }
     }
 
     private applyDescriptors(ruleset: RuleSet): void {
@@ -123,7 +133,7 @@ export class CssState {
         });
     }
 
-    private playKeyframeAnimations(ruleset: RuleSet): void {
+    private playKeyframeAnimationsFromRuleSet(ruleset: RuleSet): void {
         let ruleAnimations: kam.KeyframeAnimationInfo[] = ruleset[animationsSymbol];
         if (ruleAnimations) {
             ensureKeyframeAnimationModule();

Original file line number	Diff line number	Diff line change
`@@ -608,13 +608,19 @@ export abstract class ViewBase extends Observable implements ViewBaseDefinition`
`608`	`608`	`}`
`609`	`609`
`610`	`610`	`public initNativeView(): void {`
`611`		`- //`
	`611`	`+ // No initNativeView(this)?`
	`612`	`+ if (this._cssState) {`
	`613`	`+ this._cssState.playPendingKeyframeAnimations();`
	`614`	`+ }`
`612`	`615`	`}`
`613`	`616`
`614`	`617`	`public resetNativeView(): void {`
`615`	`618`	`if (this.nativeView && this.recycleNativeView && isAndroid) {`
`616`	`619`	`resetNativeView(this);`
`617`	`620`	`}`
	`621`	`+ if (this._cssState) {`
	`622`	`+ this._cancelAllAnimations();`
	`623`	`+ }`
`618`	`624`	`}`
`619`	`625`
`620`	`626`	`public _setupUI(context: android.content.Context, atIndex?: number, parentIsLoaded?: boolean) {`
Original file line number	Diff line number	Diff line change
`@@ -86,6 +86,8 @@ if (application.hasLaunched()) {`
`86`	`86`	`}`
`87`	`87`
`88`	`88`	`export class CssState {`
	`89`	`+ private _pendingKeyframeAnimations: SelectorCore[];`
	`90`	`+`
`89`	`91`	`constructor(private view: ViewBase, private match: SelectorsMatch<ViewBase>) {`
`90`	`92`	`}`
`91`	`93`
`@@ -103,7 +105,15 @@ export class CssState {`
`103`	`105`	`}`
`104`	`106`
`105`	`107`	`matchingSelectors.forEach(s => this.applyDescriptors(s.ruleset));`
`106`		`- matchingSelectors.forEach(s => this.playKeyframeAnimations(s.ruleset));`
	`108`	`+ this._pendingKeyframeAnimations = matchingSelectors;`
	`109`	`+ this.playPendingKeyframeAnimations();`
	`110`	`+ }`
	`111`	`+`
	`112`	`+ public playPendingKeyframeAnimations() {`
	`113`	`+ if (this._pendingKeyframeAnimations && this.view.nativeView) {`
	`114`	`+ this._pendingKeyframeAnimations.forEach(s => this.playKeyframeAnimationsFromRuleSet(s.ruleset));`
	`115`	`+ this._pendingKeyframeAnimations = null;`
	`116`	`+ }`
`107`	`117`	`}`
`108`	`118`
`109`	`119`	`private applyDescriptors(ruleset: RuleSet): void {`
`@@ -123,7 +133,7 @@ export class CssState {`
`123`	`133`	`});`
`124`	`134`	`}`
`125`	`135`
`126`		`- private playKeyframeAnimations(ruleset: RuleSet): void {`
	`136`	`+ private playKeyframeAnimationsFromRuleSet(ruleset: RuleSet): void {`
`127`	`137`	`let ruleAnimations: kam.KeyframeAnimationInfo[] = ruleset[animationsSymbol];`
`128`	`138`	`if (ruleAnimations) {`
`129`	`139`	`ensureKeyframeAnimationModule();`