visibility:hidden 属性在子元素中传递速度缓慢？

Question

我有一些嵌套的元素，带有“effect”类，就像这样：

<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>

通常我会使用以下代码来淡出包括所有子元素在内的父级块：

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

但是我注意到一些奇怪的行为（有些链接在应该隐藏的时候仍然可点击），所以我去掉了不透明度的变化来展示这个问题：

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

这应该跳过透明度变化并像以前一样运行 - 因此它应该在第一秒后隐藏父元素（和所有子元素，我认为），但它有些奇怪，它表明它需要几秒钟才能按顺序隐藏子元素。 jsfiddle 看起来效果只会在完成到子元素后缓慢传播。如何在第一秒后隐藏包括所有子元素的元素，但不需要暂时删除所有子元素上的“effect”类呢？

- Tomas M

---

删除动画效果类，添加动画效果类。 - Akxe

为什么会这样？效果是仅在完成对子元素的传播后才缓慢传播吗？我如何隐藏包括第一秒之后所有子元素的元素？这些是两个不同的问题。如果你在同一个问题中问两个不同的问题，你可能会得到回答其中一个或另一个的答案，但往往不会同时得到两个问题的答案。问题应该具体：询问为什么或如何，而不是两者都问。 - T.J. Crowder

“Why”将被埋藏在这里的某个地方：http://www.w3.org/TR/css3-transitions/#application。 - T.J. Crowder

好的，我已经去掉了为什么的问题，现在我问的是如何 :) - Tomas M

Answer 1

这是因为您在子元素上也有“effect”类。因此，每个具有该类的元素都需要1秒钟才能找到。

从内部元素中删除该类，它就可以正常工作了。

如果您不想保留隐藏元素的空白空间，则可以像Nerdkowski建议的那样使用“display:none”。

- Jkike

Answer 2

移除最后两个项目上的effect类，它就可以正常工作：

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

更新的代码片段：http://jsfiddle.net/a3dbyudy/5/

你所描述的行为的原因是你给每个子元素都设置了过渡效果，所以当脚本到达这些子元素时，它会等待一秒钟才执行 visibility: hidden。

编辑：如果你不想删除这些类，你可以使用 hide() 或者 fadeOut()，这样也会为隐藏提供一个不错的小效果。如果你使用 hide(1000)，还会添加一个微妙的隐藏效果。

查看更新的代码片段（只使用hide()）：http://jsfiddle.net/a3dbyudy/8/

- Chrillewoodz

---

我的问题是如何在不需要删除效果类的情况下完成它。 - Tomas M

Answer 3

转换以级联方式工作。因此，当您将visibility: hidden应用于父元素时，它需要1秒钟才能完成隐藏。最后，在正式变为visibility: hidden时，浏览器会对子元素进行样式重新计算，现在继承了父元素的visibility: hidden。需要1秒钟来应用该新样式，以此类推到下一个元素。

这就是为什么需要3个子元素的时间为3秒-每个子元素需要1秒钟才能变成visibility: hidden，然后子元素才继承属性并应用自己的过渡。

---

此外，你的HTML无效，因为它缺少一些引号 - 这是修复后的HTML：

<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>

- Maximillian Laumeister

Answer 4

感谢评论，我现在明白了那里发生了什么。因此，为了隐藏父元素及其所有子元素，需要使用以下代码同时将“hidden”设置为所有子元素，以便效果的过渡同时运行：

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

这将隐藏的CSS样式添加到所有具有effect类的元素以及父类（使用addBack()）。

- Tomas M

Answer 5

您所需要的是：

all elements should be hidden in 1 second. But it takes 3 seconds to hide the last!

你需要什么： 链接

- Giau Huynh