Question

我有一个突出显示单词的句子：

我正在尝试使class="special"可见，而其余class="sentence"出现在其周围。

几秒钟后，我触发了这个

setTimeout(() => {
  document.getElementById("sentence-1").className += " fadeIn";
}, 2000)

.sentence {
  opacity: 0;
}
.special {
  opacity: 1;
}

.fadeIn{
  opacity: 1;
  transition: opacity 2s 2s;
}

<span id="sentence-1" class="sentence">This is the special <span id="special-1" class="special">word</span>, cool huh?</span>

在我的脑海中，我说将.sentence的不透明度设置为0，将.special的不透明度设置为1，然后在触发javascript时在句子中淡化...

相反，整个过程逐渐消失了，我无法始终显示.special。

编辑：如果有帮助，我可以访问.class或#id的父元素和子元素...

Answer 1

您将无法使用opacity进行此操作，因为您不能将不透明元素嵌套在一个透明元素中。最终结果是完全透明。

您可以改用rgba颜色值并转换 alpha 通道。

例如

window.addEventListener('load', () =>
  document.querySelector(".sentence").classList.add("fadeIn"));

.sentence {
  color: rgba(0, 0, 0, 0);
  transition: color 2s 2s;
}
.special {
  color: #000;
}

.fadeIn {
  color: rgba(0, 0, 0, 1);
}

<span class="sentence">This is the special <span class="special">word</span>, cool huh?</span>

注意：我必须在window load 事件中运行JS，以确保CSS正确应用

Answer 2

setTimeout(() => {
var x = document.getElementsByClassName('sentence');
var i;
for (i = 0; i < x.length; i++) 
{
   x[i].className += ' fadeIn'; // WITH space added
}
  

}, 2000)

.sentence {
  opacity: 0;
}
  
.fadeIn{
  opacity: 1;
  transition: opacity 2s 2s;
}

 <span class="sentence">This is the special </span>word
 <span class="sentence">
, cool huh?</span>

将CSS不透明度应用于父级，而非子级

2 个答案: