时间戳

首页 > 解决方案 > CSS 动画是否会导致 Angular 2 停止渲染？

css - CSS 动画是否会导致 Angular 2 停止渲染？

问题描述

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

预习

在.ts我有一个

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

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

{{}}在发生其他事情之前，所有这些都不会更新。A*ngIf显示一些东西，或者触发了一个 CSS 动画。控制台中没有错误。

抽屉的 CSS 动画：

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

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

在另一部分中，.ts我直接更改了heightand width。

有谁之前经历过这个吗？CSS 动画的存在是否会与 Angular 混淆？

标签： cssangulartypescript

解决方案

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

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

有了相对位置并且没有更多的弹性，变量正在正确更新并且一切都很好。可能不重要，但在这种情况下，它解决了问题。

推荐阅读