在 Angular route/view-change 之前执行动画

Question

我有一个问题：

在Angularroute/view-change之前执行一个动画。
单击 route/view 更改按钮时 - 在 route/view-change 完成之前会显示几秒钟的警告弹出窗口。

我是 Angular 和 Typescript 的新手，所以如果您需要任何说明，请温和地告诉我。

谢谢！

埃里克

Answer 1

实现这一点的一种方法是使用 Angular 动画的 (@animation.done) 功能，这样您就可以在动画执行完毕后更改路线。我制作了一个 StackBlitz example，其中，当您单击该按钮时，会显示一个弹出窗口并询问您是否要更改路线。如果是这样，动画开始运行，一旦完成，页面就会改变。

这是我的做法：

component.ts

export class PersonComponent {
  state = 'left';
  changeRoute = false;

  constructor(private router: Router) { }

  goTo() {
    if (this.changeRoute) {
      this.router.navigate(['hello']);
    }
  }

  confirm() {
    if (confirm("Are you sure you want to go to hello page ?")) {
      this.changeRoute = true;
      this.runAnimation();
    }
  }

  runAnimation() {
    this.state = 'left';
    this.state = 'right';
  }
}

component.html

<h1>Person page</h1>
  <button (click)="confirm()">Go to Hello page</button>

<div class="bar bar-div"></div>
<div [@load]="state" (@load.done)="goTo()" class="loading-bar bar-div"></div>

进度条结束后，页面发生变化。

在 Angular route/view-change 之前执行动画

Execute a animation before route/view-change in Angular

angular

typescript

angular-material

angular-animations