在为 Angular 中的变量设置新值之前等待 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.

在为 Angular 中的变量设置新值之前等待 2

Wait before setting a new value to a variable in Angular 2

animation

ng-class

angular