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

切換一個布爾值（真/假）值