我有一些带有“效果”类的嵌套元素,如下所示:
<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 按顺序。
看起来效果只有在完成到子元素后才会缓慢传播。如何在第一秒后隐藏包括所有子元素在内的元素,而不需要暂时删除所有子元素的“效果”类?
最佳答案
这是因为您在子元素上也有类“效果”。因此,找到具有该类的每个元素都需要 1s。
从内部元素中删除该类,它将正常工作。
如果您对保留隐藏元素的空白区域不感兴趣,您可以按照 Nerdkowski 的建议使用“display:none”
关于javascript - 可见性 :hidden propagates slowly to childs?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31871849/