Angular 2按钮点击动画

Question

我想在每次按钮点击时制作一个先缩小再缩小效果的动画。以下是我尝试过的：

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

这是我的 CSS：

@keyframes buttonClickAnimation {
  0% {transform: scale(0.8);}
  100% {transform: scale(1);}
}
.animated-button {
  animation: buttonClickAnimation 0.5s;
}

这是我的组件：

...
animated: boolean = false;

clickMe() {
  this.animated = true;
}

这只适用于第一次点击，这是有道理的，因为我的animated 变量永远不会被设置回false。但是，如果我在clickMe() 中将其设置回false，则动画将没有时间执行。也许这甚至不是实现这一点的正确方法。请指教！谢谢。

Answer 1

您可以通过附加! 来切换布尔值（真/假）

animated: boolean = false;

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

Answer 2

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

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

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