keyframe animations (css) problems using NNG

I ran this by Tsvetan Raikov and we think this is an issue that needs fixing:

In an app scaffolded as per normal in the cli (`tns create myNNGapp --ng) I am attempting to animate cards using keyframe animation:

@keyframes card {
    from { opacity: 0 }
    to { opacity: 1}
}
.card {
    opacity: 0;
    background-color: #DA4167;
    animation-name: card;
    animation-duration: 4s;
    animation-iteration-count: 1;
    margin: 10;
    border-radius: 5;
    color: #EBEBD3;
}

The keyframe animation to fade in does work, but in console, I get this error:

CONSOLE LOG file:///app/tns_modules/@angular/core/src/facade/lang.js:360:16: resolvePromise@file:///app/tns_modules/zone.js/dist/zone-node.js:516:41
    resolvePromise@file:///app/tns_modules/zone.js/dist/zone-node.js:501:32
    file:///app/tns_modules/zone.js/dist/zone-node.js:549:32
    invokeTask@file:///app/tns_modules/zone.js/dist/zone-node.js:323:43
    onInvokeTask@file:///app/tns_modules/@angular/core/src/zone/ng_zone_impl.js:44:51
    invokeTask@file:///app/tns_modules/zone.js/dist/zone-node.js:322:55
    runTask@file:///app/tns_modules/zone.js/dist/zone-node.js:223:58
    drainMicroTaskQueue@file:///app/tns_modules/zone.js/dist/zone-node.js:455:43
    promiseReactionJob@[native code]
    UIApplicationMain@[native code]
    start@file:///app/tns_modules/application/application.js:233:26
    nativeScriptBootstrap@file:///app/tns_modules/nativescript-angular/application.js:144:22
    anonymous@file:///app/main.js:5:36
    evaluate@[native code]
    moduleEvaluation@[native code]
    [native code]
    promiseReactionJob@[native code]
Sep  2 11:05:55 LOOPERMAC ndduiworkshop[40158]: CONSOLE ERROR file:///app/tns_modules/zone.js/dist/zone-node.js:442:27: Unhandled Promise rejection: Animation cancelled. ; Zone: angular ; Task: Promise.then ; Value: Error: Animation cancelled. _rejectAnimationFinishedPromise@file:///app/tns_modules/ui/animation/animation-common.js:110:31
    animationFinishedCallback@file:///app/tns_modules/ui/animation/animation.js:115:57
    animationDidStopFinished@file:///app/tns_modules/ui/animation/animation.js:67:35
    UIApplicationMain@[native code]
    start@file:///app/tns_modules/application/application.js:233:26
    nativeScriptBootstrap@file:///app/tns_modules/nativescript-angular/application.js:144:22
    anonymous@file:///app/main.js:5:36
    evaluate@[native code]
    moduleEvaluation@[native code]
    [native code]
    promiseReactionJob@[native code]
Sep  2 11:05:55 LOOPERMAC ndduiworkshop[40158]: CONSOLE ERROR file:///app/tns_modules/zone.js/dist/zone-node.js:444:23: Error: Uncaught (in promise): Error: Animation cancelled.

Perhaps this could be fixed in the next release.

[jeffswitzer]

Also getting ERROR Error: Uncaught (in promise): Error: Animation cancelled. This is on tns 3.3 android, angular 4.4.1.

The code causing this looks like: <FlexboxLayout [ngClass]="{'some-animated-css-class' : some-var-that-toggles-true-and-false}"> ...

@keyframes fadeout {
    0% {
        background-color: $color-save-button;
    }
    100% {
        background-color: $color-btn;
    }
}

.some-animated-css-class {
    background-color: $color-save-button;
    animation-name: fadeout;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

I get the error only when some-var-that-toggles-true-and-false goes from true to false which should remove the css class doing the animation. Also the css animation only takes 2 seconds, but the css class isn’t removed until after like 5 seconds so it’s not like I’m removing the class in the middle of the animation.

Maybe this issue need to be reopened?

[dudipsh]

any updates?