nativescript-angular icon indicating copy to clipboard operation
nativescript-angular copied to clipboard

RouterExtensions crashing animation

Open vforv opened this issue 4 years ago • 0 comments

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

vforv avatar Oct 31 '20 21:10 vforv