Merge pull request #1501 from NativeScript/raikov/issue-1218

Fixed: Setting and instantly animating a property fails for iOS

ui/animation/animation.ios.ts

@@ -29,6 +29,9 @@ class AnimationDelegateImpl extends NSObject {
        var nativeView = <UIView>this._propertyAnimation.target._nativeView;
        var propertyNameToAnimate = this._propertyAnimation.property;
        var value = this._propertyAnimation.value;
+
+       (<any>this._propertyAnimation.target)._suspendPresentationLayerUpdates();
+
        switch (this._propertyAnimation.property) {
            case common.Properties.backgroundColor:
                this._propertyAnimation.target.backgroundColor = value;
@@ -50,6 +53,9 @@ class AnimationDelegateImpl extends NSObject {
                }
                break;
         }
+
+        (<any>this._propertyAnimation.target)._resumePresentationLayerUpdates();
+
    }
 
     public animationDidStopFinished(anim: CAAnimation, flag: boolean): void {

ui/core/view.ios.ts

@@ -71,6 +71,7 @@ export class View extends viewCommon.View {
     private _hasTransfrom = false;
     private _privateFlags: number;
     private _cachedFrame: CGRect;
+    private _suspendCATransaction = false;
 
     constructor() {
         super();
@@ -294,7 +295,22 @@ export class View extends viewCommon.View {
             this._nativeView.removeFromSuperview();
         }
     }
-}
+
+    // By default we update the view's presentation layer when setting backgroundColor and opacity properties.
+    // This is done by calling CATransaction begin and commit methods.
+    // This action should be disabled when updating those properties during an animation.
+    public _suspendPresentationLayerUpdates() {
+      this._suspendCATransaction = true;
+    }
+
+    public _resumePresentationLayerUpdates() {
+      this._suspendCATransaction = false;
+    }
+
+    public _isPresentationLayerUpdateSuspeneded() {
+      return this._suspendCATransaction;
+    }
+  }
 
 export class CustomLayoutView extends View {
 
@@ -336,7 +352,14 @@ export class ViewStyler implements style.Styler {
         var nativeView: UIView = <UIView>view._nativeView;
         if (nativeView) {
             ensureBackground();
+            var updateSuspended = view._isPresentationLayerUpdateSuspeneded();
+            if (!updateSuspended) {
+              CATransaction.begin();
+            }
             nativeView.backgroundColor = background.ios.createBackgroundUIColor(view);
+            if (!updateSuspended) {
+              CATransaction.commit();
+            }
         }
     }
 
@@ -374,7 +397,15 @@ export class ViewStyler implements style.Styler {
     private static setOpacityProperty(view: View, newValue: any) {
         var nativeView: UIView = <UIView>view._nativeView;
         if (nativeView) {
-            return nativeView.alpha = newValue;
+            var updateSuspended = view._isPresentationLayerUpdateSuspeneded();
+            if (!updateSuspended) {
+              CATransaction.begin();
+            }
+            var alpha = nativeView.alpha = newValue;
+            if (!updateSuspended) {
+              CATransaction.commit();
+            }
+            return alpha;
         }
     }