如何"reset" CSS 更改？

Question

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

我尝试在 ngOnDestroy 中进行更改(我认为这将是这样做的适当生命周期钩子)，方法是直接使用 document.getElementsById()...(我知道这一定是一个糟糕的方法)。

我尝试研究一种使用 jQuery "重置"CSS 的方法，但甚至不知道如何处理。

jQuery在我的索引.html文件中的脚本标记中：

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

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

有没有简单的解决方案？或者有没有更好的方法来实现我首先要做的事情？我的索引中还有其他jQuery.html我也将其用于各种Materialize CSS目的。如果有更好的最佳实践方法，我想知道。

Answer 1

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

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

即

private childrenVisible = false;
...
ngOnInit() {
this.childrenVisible = true
}
...
ngOnDestroy() {
this.childrenVisible = false
}

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