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

を追加することによって、ブール（真/偽）の値を切り替えることができます