Javascript 角度2按钮单击动画

我想动画缩小，然后缩小效果对每个按钮点击。以下是我尝试过的：

<button (click)="clickMe()" [ngClass]="{'animated-button': animated}">Button</button>

以下是我的组件：

...
animated: boolean = false;

clickMe() {
  this.animated = true;
}

这只在第一次单击时起作用，这是有意义的，因为我的

动画

变量永远不会设置回

false

。但是，如果我在

clickMe（）

中将其设置回

false

，动画将没有时间执行。也许这甚至不是实现这一点的正确方法。请告知！谢谢。

您可以通过附加

来切换布尔值（真/假）

animated: boolean = false;

clickMe() {
  this.animated = !this.animated;
}

添加延迟以将动画变量设置为false

clickMe() {
  this.animated = true;
  delay(500).then(() => this.animated = false);
}

async function delay(ms: number) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

把它变成指令会很好，不是吗？（避免每次都要冗余地处理一个无用的状态变量）
clickMe() {
  this.animated = true;
  delay(500).then(() => this.animated = false);
}

async function delay(ms: number) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}