Animation error when using *ngIf on animation element

[NickIliev]

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

[NathanWalker]

I am seeing this as well, curious what workarounds exist to get around this?

[jonvandermeulen]

Also having this issue, oddly on Android only.

[smarza]

Same here. By the way, It's pretty annoying.
every time something interrupt an animation in nativescript, it throws an exception basically saing that you didn't handle with the "animation promise". Does anyone have any workaround to that?

@NickIliev, @NathanWalker Did you find something about it?

Thanks

[patrickpereira]

+1

[briandilley]

This isn't fixed, i still get it:

JS: ERROR Error: Uncaught (in promise): Error: Animation cancelled.
JS: Error: Animation cancelled.
JS:     at KeyframeAnimation._rejectAnimationFinishedPromise (file:///data/data/com.gosuna.quickride.DriverApp/files/app/tns_modules/tns-core-modules/ui/animation/keyframe-animation.js:208:22) [angular]
JS:     at KeyframeAnimation.cancel (file:///data/data/com.gosuna.quickride.DriverApp/files/app/tns_modules/tns-core-modules/ui/animation/keyframe-animation.js:122:18) [angular]
JS:     at file:///data/data/com.gosuna.quickride.DriverApp/files/app/tns_modules/tns-core-modules/ui/styling/style-scope.js:312:62 [angular]
JS:     at Array.forEach (native) [angular]
JS:     at CssState.stopKeyframeAnimations (file:///data/data/com.gosuna.quickride.DriverApp/files/app/tns_modules/tns-core-modules/ui/styling/style-scope.js:312:14) [angular]
JS:     at file:///data/data/com.gosuna.quickride.DriverApp/files/app/tns_modules/tns-core-modules/ui/styling/style-scope.js:279:19 [angular]
JS:     at Image.ViewBase._batchUpdate (file:///data/data/com.gosuna.quickride.DriverApp/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js:229:20) [angular]
JS:     at CssState.updateDynamicState (file:///data/data/com.gosuna.quickride.DriverApp/files/app/tns_modules/tns-core-modules/ui/styling/style-scope.js:278:19) [angular]
JS:     at CssState.onChange (file:///data/data/com.gosuna.quickride.DriverApp/files/app/tns_modules/tns-core-modules/ui/styling/style-scope.js:255:18) [angular]
JS:     at Image.ViewBase._onCssStateChange (file:///data/data/com.gosuna.quickride.DriverApp/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js:572:24) [angular]
JS:     at valueChanged (file:///data/data/com.gosuna.quickride.DriverApp/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js:655:14) [angular]
JS:     at Image.Property.set [as className] (file:///data/data/com.gosuna.quickride.DriverApp/files/app/tns_modules/tns-core-modules/ui/core/properties/properties.js:104:25) [angular]
JS:     at SafeSubscriber._next (file:///data/data/com.gosuna.quickride.DriverApp/files/app/quickride/driver/pages/login/login.page.js:111:49) [angular]
JS:     at SafeSubscriber.__tryOrUnsub (file:///data/data/com.gosuna.quickride.DriverApp/files/app/tns_modules/rxjs/Subscriber.js:239:16) [angular]

[bzaruk]

Also getting it here:

version (tns-core-modules - 3.4.1, nativescript-angular - 5.2.0)

this is the code line:

this.view.animate({ scale: { x: 1, y: 1 }, duration: 50 })

this is the error:

CONSOLE ERROR file:///app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:569:26: Unhandled Promise rejection: Animation cancelled. ; Zone: <root> ; Task: null ; Value: Error: Animation cancelled. _rejectAnimationFinishedPromise@file:///app/tns_modules/tns-core-modules/ui/animation/animation-common.js:98:31 [<root>]

Unhandled Promise rejection: Animation cancelled. ; Zone: <root> ; Task: null ; Value: Error {message: "Animation cancelled.", line: 994, column: 38, sourceURL: "file:///app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js", stack: "_rejectAnimationFinishedPromise@file:///app/tns_mo…<root>]
promiseReactionJob@[native code] [<root>]"…} _rejectAnimationFinishedPromise@file:///app/tns_modules/tns-core-modules/ui/animation/animation-common.js:98:31 [<root>]
animationFinishedCallback@file:///app/tns_modules/tns-core-modules/ui/animation/animation.js:148:57 [<root>]
animationDidStopFinished@file:///app/tns_modules/tns-core-modules/ui/animation/animation.js:70:35 [<root>]
UIApplicationMain@[native code] [<root>]
start@file:///app/tns_modules/tns-core-modules/application/application.js:235:26 [<root>]
bootstrapApp@file:///app/tns_modules/nativescript-angular/platform-common.js:86:28 [<root>]
bootstrapModule@file:///app/tns_modules/nativescript-angular/platform-common.js:72:26 [<root>]
anonymous@file:///app/main.js:7:57 [<root>]
evaluate@[native code] [<root>]
moduleEvaluation@[native code] [<root>]
[native code] [<root>]
promiseReactionJob@[native code] [<root>] (/Users/bzaruk/Documents/Projects/Staccato/staccato_client/node_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:569:26)

[kvindascr]

I was having this same issue with a element having ngClass where the fa-spin was added.
When removed generated the exception.
I ended up having a copy of the element and show it with visibility, and the error is not raised.
So basically not using ngclass and using visibility instead of ngIf.
Hope that can throw a light on the people still finding a solution for it.

[vultix]

@hdeshev I can confirm that this issue is still not resolved. Can we re-open the issue?

[NickIliev]

@vultix can you share a Playground demo or a sample project demonstrating your exact issue.

[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.

[NathanWalker]

Could this be reopened? Related to mishandling around animations which have existed for quite long while.
NativeScript/NativeScript#5861

Can add cancel improvement to that Pr as well.

[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)"