在 Angular 中 CSS 转换后呈现 JS

Question

所以我有一个按钮，单击时会调用 onGoToAbout 函数。此函数将元素高度设置为 0，并将 desk 布尔变量设置为 false。此变量连接到元素 *ngIf。

我的问题是 *ngIf 在我的 CSS 转换发生之前执行。我在想我需要某种延迟，但不知道如何实现！

下面是我的代码。使用 jQuery 不是一个选项。

onGoToAbout(event) {
 document.getElementById("slideshow").style.height = "0vh";
        this.desk = false;
    }

Answer 1

简单地延迟 this.desk = false 超时：

setTimeout( () => { this.desk = false }, 500 )

这样，您的 CSS 转换将执行，然后在 500 毫秒后，变量将设置为 false。

此外，当然 jQuery 不是 Angular 应用程序中的一个选项 :) document.getElementById 甚至不应该被使用，因为它不是 angular-y , 但假设它只是为了执行 CSS 转换，没关系。

Rendering JS after CSS transition in Angular