Animation error when using *ngIf on animation element

From @Plamen5kov on November 14, 2016 11:55

From @MaklaCof on November 11, 2016 21:38

I get error when variable in *ngIf is changed:

> [JS      ] EXCEPTION: Uncaught (in promise): Error: Animation cancelled.
[JS      ] ORIGINAL STACKTRACE:
[JS      ] Error: Uncaught (in promise): Error: Animation cancelled.
[JS      ]     at resolvePromise (/data/data/com.telerik.Mobile/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:416:31)
[JS      ]     at resolvePromise (/data/data/com.telerik.Mobile/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:401:17)
[JS      ]     at /data/data/com.telerik.Mobile/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:449:17
[JS      ]     at ZoneDelegate.invokeTask (/data/data/com.telerik.Mobile/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:223:37)
[JS      ]     at Object.NgZoneImpl.inner.inner.fork.onInvokeTask (/data/data/com.telerik.Mobile/files/app/tns_modules/@angular/core/bundles/core.umd.js:6233:41)
[JS      ]     at ZoneDelegate.invokeTask (/data/data/com.telerik.Mobile/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:222:42)
[JS      ]     at Zone.runTask (/data/data/com.telerik.Mobile/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:123:47)
[JS      ]     at drainMicroTaskQueue (/data/data/com.telerik.Mobile/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:355:35)
[JS      ] Unhandled Promise rejection: Animation cancelled. ; Zone: angular ; Task: Promise.then ; Value: Error: Animation cancelled. Error: Animation cancelled.
[JS      ]     at Animation._rejectAnimationFinishedPromise (/data/data/com.telerik.Mobile/files/app/tns_modules/ui/animation/animation-common.js:110:22)
[JS      ]     at Animation._onAndroidAnimationCancel (/data/data/com.telerik.Mobile/files/app/tns_modules/ui/animation/animation.js:113:14)
[JS      ]     at Animation._animatorListener.android.animation.Animator.AnimatorListener.onAnimationCancel (/data/data/com.telerik.Mobile/files/app/tns_modules/ui/animation/animation.js:53:22)
[JS      ]     at Animation.cancel (/data/data/com.telerik.Mobile/files/app/tns_modules/ui/animation/animation.js:92:27)
[JS      ]     at KeyframeAnimation.cancel (/data/data/com.telerik.Mobile/files/app/tns_modules/ui/animation/keyframe-animation.js:105:31)
[JS      ]     at Label.View._unregisterAllAnimations (/data/data/com.telerik.Mobile/files/app/tns_modules/ui/core/view-common.js:1114:27)
[JS      ]     at Style._resetCssValues (/data/data/com.telerik.Mobile/files/app/tns_modules/ui/styling/style.js:925:20)
[JS      ]     at CssState.apply (/data/data/com.telerik.Mobile/files/app/tns_modules/ui/styling/style-scope.js:46:25)
[JS      ]     at Label.View.applyCssState (/data/data/com.telerik.Mobile/files/app/tns_modules/ui/core/view-common.js:1201:24)
[JS      ]     at Label.View._onCssStateChange (/data/data/com.telerik.Mobile/files/app/tns_modules/ui/core/view-common.js:1194:14)
[JS      ] Error: Uncaught (in promise): Error: Animation cancelled.

HTML:

<Label class="fa fa-spin" text="&#xf013;" *ngIf="isRunning"></Label>

CSS:

`.fa {
    font-family: FontAwesome;
    font-size: 24;
}

.fa-spin {
    animation-name: fa-spin;
    animation-duration: 4;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    vertical-align: middle;
    text-align: center;
}

@keyframes fa-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

TS:

export class HomeComponent implements OnInit
{
    isRunning = false;

    constructor(private router: Router, private page: Page, private zone: NgZone)
    {
    }

    parseResponse(data: any)
    {
        this.zone.run(() =>
        {
            if (typeof data.isRunning !== "undefined" && data.isRunning !== null)
                this.isRunning = data.isRunning;
        });
    }
}

I hope code is readable, because code formatting is not working. The code works, even error is raised.

Copied from original issue: NativeScript/nativescript-cli#2218

Copied from original issue: NativeScript/NativeScript#3089

[tomasbjerre]

I think I still see this, but in: NativeScript Vue IOS nativescript/ios: 7.1.1 vue: 2.6.12

Error:

Error: Animation cancelled.
    at Animation._rejectAnimationFinishedPromise (file:///X.app/app/vendor.js:20563:18)
    at AnimationDelegateImpl.animationFinishedCallback [as _finishedCallback] (file:///X.app/app/vendor.js:20951:16)
    at AnimationDelegateImpl.animationDidStopFinished (file:///X.app/app/vendor.js:20860:12)"

[vultix]

@NickIliev

Here is the playground demonstrating the error I am getting.

A few notes while creating this playground:

• Seeing this exception throughout the app I am creating I thought it would easy to reproduce in a playground, but wasn’t. I had to bring some specific code for the playground.
• This exception is thrown both by using *ngIf="val" and [class.animate]="val" to trigger the animation.

If you have any questions, let me know! Thanks for your help.