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

Answer 1

您可以通过附加!

animated: boolean = false; 

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

切换一个布尔值（真/假）值