当 opacity:0 或 visibility:hidden 时，不应用类答案

【问题标题】：when opacity:0 or visibility:hidden, class is not applied当 opacity:0 或 visibility:hidden 时，不应用类
【发布时间】：2021-09-01 01:20:42
【问题描述】：

我在 CSS 中有一个隐藏类。

.hidden {
  display: none;
}

当按钮被点击时，我调用这个函数：


const openModal = () => {
  modal.classList.remove('hidden');
  overlay.classList.remove('hidden');
  

  for (let i = 0; i < modalItems.length; i++) {
    if (
      modalItems[i].innerText === document.querySelector('#default').innerText
    ) {
      modalItems[i].classList.add('item-background');
    }
  }
};

问题是，如果我使用display:none，则不会应用过渡。因此，我将display:none 替换为opacity:0 / visibility:hidden。之后，动画被应用，但问题是item-background类没有应用，当modal打开时。

【问题讨论】：

我认为你在这里搞砸了 CSS 特异性规则

标签： javascript html css dom

【解决方案1】：

更改 css 会使您的字符串比较条件不起作用没有合乎逻辑的原因。原因更可能是 2 个字符串的细微差别。比较 2 个不同元素的 innerText 可能会出现问题，请尝试使用 toLowerCase()（如果您不需要区分大小写）和 trim() 尽可能多地对其进行规范化，例如：

let equals = modalItems[i].innerText.toLowerCase().trim() === document.querySelector('#default').innerText.toLowerCase().trim();
if (equals) {
  //
}

【讨论】：