jquery - 离开组件时如何更改 "reset"CSS？

Question

所以我几乎完全是自学成才，可能没有使用所有最佳实践，也许这就是我遇到麻烦的原因。基本上，我使用 jQuery 在鼠标悬停时更改元素的不透明度。当我离开该组件时，我希望该不透明度被“重置”(返回到 0)，因此每次都必须再次执行 jQuery 事件。

我已经尝试通过使用 document.getElementsById() 之类的东西直接修改元素来在 ngOnDestroy 中进行更改(我认为这将是适当的生命周期钩子(Hook))...(我知道这一定很糟糕方法)。

我已经尝试研究一种使用 jQuery 来“重置”CSS 的方法，但我什至不知道该怎么做。

jQuery 在我的 index.html 文件的脚本标签中:

$('.parent').mouseover(function() {
          $('.children').animate(
            {
              opacity: 1.0
            },
            1250,
            function() {}
          )
        })

现在，当我导航回此页面并再次呈现该组件时，.children 的不透明度应该为 0，但它们是可见的。

有什么简单的解决方法吗？还是有更好的方法来实现我最初想要做的事情？我的 index.html 中还有其他 jQuery，我也将其用于各种 Materialize CSS 目的。如果有更好的最佳实践方法，我很想知道。

Answer 1

为什么要将 jQuery 与 angular7 一起使用？当然有一种方法可以不必这样做。

您还可以在 TS 文件中使用变量，并在不同的生命周期 Hook 中打开和关闭它们。

即

private childrenVisible = false;

...

ngOnInit() {
    this.childrenVisible = true
}

...

ngOnDestroy() {
    this.childrenVisible = false
}

然后在您的模板 html 中，您可以将以下内容添加到您的子项 [ngClass]={'is-active':childrenVisible}