각도 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을 원할 수도 있습니다.