diff --git a/tns-core-modules/ui/core/view-base/view-base.ts b/tns-core-modules/ui/core/view-base/view-base.ts index 6f3b06d62..4aec7516b 100644 --- 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 index cd609536a..3b07eaeaa 100644 --- 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) { } @@ -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();