From 35be4bc40a7f12cee1bf9ca5265a0d521edc096d Mon Sep 17 00:00:00 2001
From: Panayot Cankov <Panayot.Cankov@telerik.com>
Date: Tue, 3 Oct 2017 15:50:09 +0300
Subject: [PATCH] Animations improperly reset (#4900)

* Animations improperly reset

* Scope stop and start of animations to avoid blinks
---
 tns-core-modules/ui/styling/style-scope.ts | 76 +++++++++++++---------
 1 file changed, 46 insertions(+), 30 deletions(-)

diff --git a/tns-core-modules/ui/styling/style-scope.ts b/tns-core-modules/ui/styling/style-scope.ts
index adf61d1d6..b142d4d22 100644
--- a/tns-core-modules/ui/styling/style-scope.ts
+++ b/tns-core-modules/ui/styling/style-scope.ts
@@ -203,6 +203,7 @@ export class CssState {
 
     _match: SelectorsMatch<ViewBase>;
     _matchInvalid: boolean;
+    _playsKeyframeAnimations: boolean;
 
     constructor(private view: ViewBase) {
         this._onDynamicStateChangeHandler = () => this.updateDynamicState();
@@ -245,9 +246,11 @@ export class CssState {
     private updateDynamicState(): void {
         const matchingSelectors = this._match.selectors.filter(sel => sel.dynamic ? sel.match(this.view) : true);
 
-        this.stopKeyframeAnimations();
-        this.setPropertyValues(matchingSelectors);
-        this.playKeyframeAnimations(matchingSelectors);
+        this.view._batchUpdate(() => {
+            this.stopKeyframeAnimations();
+            this.setPropertyValues(matchingSelectors);
+            this.playKeyframeAnimations(matchingSelectors);
+        });
     }
 
     private playKeyframeAnimations(matchingSelectors: SelectorCore[]): void {
@@ -266,16 +269,31 @@ export class CssState {
             }
         });
 
-        animations.forEach(animation => animation.play(<View>this.view));
-        Object.freeze(animations);
-        this._appliedAnimations = animations;
+        if (this._playsKeyframeAnimations = animations.length > 0) {
+            animations.map(animation => animation.play(<View>this.view));
+            Object.freeze(animations);
+            this._appliedAnimations = animations;
+        }
     }
 
     private stopKeyframeAnimations(): void {
+        if (!this._playsKeyframeAnimations) {
+            return;
+        }
+
         this._appliedAnimations
             .filter(animation => animation.isPlaying)
             .forEach(animation => animation.cancel());
         this._appliedAnimations = CssState.emptyAnimationArray;
+
+        this.view.style["keyframe:rotate"] = unsetValue;
+        this.view.style["keyframe:scaleX"] = unsetValue;
+        this.view.style["keyframe:scaleY"] = unsetValue;
+        this.view.style["keyframe:translateX"] = unsetValue;
+        this.view.style["keyframe:translateY"] = unsetValue;
+        this.view.style["keyframe:backgroundColor"] = unsetValue;
+        this.view.style["keyframe:opacity"] = unsetValue;
+        this._playsKeyframeAnimations = false;
     }
 
     /**
@@ -291,33 +309,31 @@ export class CssState {
                 newPropertyValues[declaration.property] = declaration.value));
         Object.freeze(newPropertyValues);
 
-        this.view._batchUpdate(() => {
-            const oldProperties = this._appliedPropertyValues;
-            for(const key in oldProperties) {
-                if (!(key in newPropertyValues)) {
-                    if (key in this.view.style) {
-                        this.view.style[`css:${key}`] = unsetValue;
-                    } else {
-                        // TRICKY: How do we unset local value?
-                    }
+        const oldProperties = this._appliedPropertyValues;
+        for(const key in oldProperties) {
+            if (!(key in newPropertyValues)) {
+                if (key in this.view.style) {
+                    this.view.style[`css:${key}`] = unsetValue;
+                } else {
+                    // TRICKY: How do we unset local value?
                 }
             }
-            for(const property in newPropertyValues) {
-                if (oldProperties && property in oldProperties && oldProperties[property] === newPropertyValues[property]) {
-                    continue;
-                }
-                const value = newPropertyValues[property];
-                try {
-                    if (property in this.view.style) {
-                        this.view.style[`css:${property}`] = value;
-                    } else {
-                        this.view[property] = value;
-                    }
-                } catch (e) {
-                    traceWrite(`Failed to apply property [${property}] with value [${value}] to ${this.view}. ${e}`, traceCategories.Error, traceMessageType.error);
-                }
+        }
+        for(const property in newPropertyValues) {
+            if (oldProperties && property in oldProperties && oldProperties[property] === newPropertyValues[property]) {
+                continue;
             }
-        });
+            const value = newPropertyValues[property];
+            try {
+                if (property in this.view.style) {
+                    this.view.style[`css:${property}`] = value;
+                } else {
+                    this.view[property] = value;
+                }
+            } catch (e) {
+                traceWrite(`Failed to apply property [${property}] with value [${value}] to ${this.view}. ${e}`, traceCategories.Error, traceMessageType.error);
+            }
+        }
 
         this._appliedPropertyValues = newPropertyValues;
     }