nativescript-angular
nativescript-angular copied to clipboard
RouterExtensions crashing animation
Environment
Provide version numbers for the following components (information can be retrieved by running tns info
in your project folder or by inspecting the package.json
of the project):
I am using last versions
Describe the bug When router is called in same time with animation animation not working. I have feeling like router bloking something
To Reproduce Create button with some animation and call in same time: this.router.navigate(['/page']);
Expected behavior I should see animation, I notice also ActivityIndicator stop working while navigation is called
Sample project Here is the code I calling together with navigate:
public onTouch(args: TouchGestureEventData) {
if (args.action !== 'down') {
return;
}
const x = args.getX();
const y = args.getY();
const btn = args.object as View;
const wrapper = btn.parent as LayoutBase;
const circle = new Label();
const btnHeight = Number(btn.height);
const btnWidth = Number(btn.width);
const d = 100; //Math.max(1, btnWidth);
circle.width = d;
circle.height = d;
circle.borderRadius = d / 2;
circle.top = y - d / 2;
circle.left = x - d / 2;
circle.backgroundColor = 'red';
circle.opacity = 0;
wrapper.addChild(circle);
circle
.animate({
scale: { x: 0, y: 0 },
opacity: 0.4,
duration: 1,
})
.then(() => {
circle
.animate({
scale: { x: 2, y: 2 },
opacity: 0,
duration: 500,
})
.then(() => {
wrapper.removeChild(circle);
});
});
}
If I wait effect to finish and then navigate it works but not solution