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.
Reactions are currently unavailable
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.