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%;
}

相對位置且沒有彈性，變量可以正確更新，一切都很好。 可能無關緊要，但是在這種情況下，它解決了問題。