新しい値を角度2の変数に設定する前に待機します

Question

表示されたメッセージをアニメーション表示しようとしていて、数秒後に消えてしまいます。私のテンプレートで

：

<p [ngClass]="{'show-message': showMessage, 'hide-message': !showMessage}">My message!!</p> 

マイCSS：

.show-message { 
    opacity: 1; 
    transition: .5s ease-in-out all; 
} 
.hide-message { 
    opacity: 0; 
    transition: .5s ease-in-out all; 
} 

マイコンポーネント：

... 
showMessage: boolean; 

constructor() { 
    this.showMessage = false; 
} 

someClickThatShouldShowMessage() { 
    this.showMessage = true; 
    setInterval(() => {this.showMessage = false;}, 3); //This doesn't seem right 
} 

ただし、メッセージがちょうど完全に表示されません。どうしてこれなの？ありがとう！

Answer 1

setIntervalは、パラメータとしてミリ秒を受け入れます。 3から3000に変更してください。

また、setIntervalはxミリ秒ごとに繰り返されます。おそらくsetTimeoutが必要です。