Angular 2 在短时间内添加/更改 CSS 类

Question

我的 Angular 2 应用程序有一个标签，显示用户当前的点数。

当点数改变时，我想在短时间内改变标签的类，以便制作某种动画让用户知道发生了一些变化。

<label class="label label-primary">
     {{userService.user.points}}
     </label>

在我的服务中，我使用 observable 获取用户点数，我可以使用以下方法检查点数是否已更改:

if (this.userData.points != data.user.points)

如果点数发生变化，如何在短时间内更改标签的类别？

Answer 1

你可以这样做:

<label class="label label-primary" [class.label-animate]="pointsChanged">
 {{userService.user.points}}
 </label>

在你的可观察对象上:

if (this.userData.points != data.user.points) {
  this.pointsChanged = true;
  window.setTimeout(() => this.pointsChanged = false, 200) // the time you want 
}

所以基本上，每次点变化时，只需保留一个切换类的标志。

还有其他解决方案，我更喜欢这个，因为它很简单。