javascript - 可见性 :hidden propagates slowly to childs?

Question

我有一些带有“效果”类的嵌套元素，如下所示:

<style>
   .effect { transition: opacity 1s, visibility 1s; }
</style>

<div id=parent class=effect>
   <a href=#>aaaaaaaaaaaaa</a>
   <div id=child class=effect>
      <a href=#>bbbbbbbbbbbbbb</a>
      <div id=childofchild class=effect>
        <a href=#>cccccccccccc</a>
      </div>
   </div>
</div>

通常我会调用以下代码淡出父 block ，包括所有子 block :

$('#parent').css({'opacity':0, 'visibility':'hidden'});

但我注意到奇怪的行为(有些链接甚至在所有内容都应该隐藏的时候仍然可以点击)，所以我删除了不透明度更改以演示问题:

$('#parent').css({'visibility':'hidden'});

这应该跳过不透明度变化并像以前一样表现 - 所以它应该仅在第一秒后隐藏父级(和所有子级，正如我假设的那样)，但它有点奇怪，它表明隐藏需要几秒钟 children 按顺序。

jsfiddle

看起来效果只有在完成到子元素后才会缓慢传播。如何在第一秒后隐藏包括所有子元素在内的元素，而不需要暂时删除所有子元素的“效果”类？

Answer 1

这是因为您在子元素上也有类“效果”。因此，找到具有该类的每个元素都需要 1s。

从内部元素中删除该类，它将正常工作。

如果您对保留隐藏元素的空白区域不感兴趣，您可以按照 Nerdkowski 的建议使用“display:none”