CSS动画会导致Angular 2停止渲染吗？

Question

我从console.logs看到该变量每秒都在更新。但是HTML中的{{variable}}不是。如果我选择文本，它将更新，或者如果将容器div设置为动画，则变量将更新。

在.ts中，我有一个

ngOnInit() {
    this.ref.detectChanges();
  }

，并且我尝试在更新变量时每秒调用一次this.ref.detectChanges()。

所有{{}}都不会更新，除非发生其他情况。 *ngIf显示某些内容，或者触发了CSS动画。控制台中没有错误。

抽屉的CSS动画：

.moveOutProductDrawer{
    left: -250px;
    animation: scootch 0.3s forwards;
}

@keyframes scootch {
    100% { left: -250px !important; }
}

在.ts的另一部分中，我正在直接更改height和width。

有人曾经历过吗？ CSS动画的存在会干扰Angular吗？

Answer 1

由于某种原因，当我更改窗口在屏幕中央的位置时，一切恢复正常。

.bigFlexcontainer{
    /* display: flex;
    align-items: center;
    justify-content: center; */
    position: relative;
    width: 100%;
    height: 100%;
}

相对位置且没有弹性，变量正确更新且一切正常。可能无关紧要，但是在这种情况下，它解决了问题。