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。但是，如果我将其设置回false中的clickMe()，则动画将没有时间执行。也许这甚至不是实现这一目标的正确方法。请指教！谢谢。

Answer 1

您可以通过附加!

来切换布尔值（true / false）

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));
}

Angular 2按钮单击动画

2 个答案: