角度动画仅在下次鼠标移动时触发

Question

我试图实现一个UI通知，该通知会在状态发生变化时淡入UI。这来自我的组件定义：

animations: [
   trigger("flyInOut", [
     state("inactive", style({opacity: 0})),
     state("active", style({opacity: 0.9})),
     state("removed", style({opacity: 0})),
     state("hovered", style({opacity: 1})),
     transition("inactive => active",
       animate("{{easeTime}}ms ease-in")
     ),
     transition("active => removed",
       animate("{{easeTime}}ms ease-in"),
     ),
     transition("active <=> hovered",
       animate("{{easeTime}}ms")
     )
  ]),
],

这些是我的show和remove函数：

show(): void {
  this.state = {...this.state, value: "active"};
  this.hideTime = new Date().getTime() + this.timeOut;
  this.intervalRef = setInterval(() => this.updateProgress(), 10);
  this.injector.get(ChangeDetectorRef).detectChanges();
}

remove(): void {
  this.state = {...this.state, value: "removed"};
  this.timeoutRef = setTimeout(() => this.$onHidden.next(), this.easeTime);
  this.injector.get(ChangeDetectorRef).detectChanges();
}

updateProgress只需更新进度条，并在达到100％时调用remove()。

show动画被触发没有问题，但remove动画仅在我将鼠标平行移动时触发。当我离开鼠标并等待进度完成时，没有任何反应。

可能是什么问题？我已经在所有地方粘贴了detectChanges()，但没有成功..

//编辑：我在v6.0.3中使用@ angular / core和@ angular / animations