jquery - 当父项离开显示 : none to block 时如何转换子项

Question

我在创建具有特定效果的弹出式菜单时遇到问题。弹出框从 display:none 到 block，然后我使用 jquery 将不透明度设置为从 0 到 1 的动画(反之亦然)。这是必要的，因为否则当元素刚刚更改其显示属性时不会发生转换。我不认为这会传播给 child 。但是在我的弹出窗口中，我有 4 列链接，它们具有不透明度过渡，每个链接都有自己的延迟，因此它们一次进入一个。但是，这在弹出窗口出现时不起作用。它们立即处于不透明度:1，即使延迟时间很长，它仍然不起作用。

有解决办法吗？我知道 CSS 动画和同一元素上的显示更改不起作用，但发现任何子动画也不起作用有点令人沮丧。当 CSS 如此简单时，我宁愿不必编写 javascript。但如果 javascript 是唯一的答案，那么这将是一个简单的解决方案。

这是一个非常简化的代码示例:

$flyout.addClass('in').animate({opacity: 1}, 200, "linear");

“in”是导致列转换的类:

.flyout { display: none; }

.flyout.in { display: block; }

.columns li {
    opacity: 0;
    -webkit-transition: opacity 0.2s;
}

.flyout.in .columns li { opacity: 1; }

// delay increases with each column
.columns > li:first-child {
    -webkit-transition-delay: 0.2s;
}

Answer 1

Is there a way around this? I knew that CSS animation alongside a display change on the same element did not work, but finding out that any child animations also do not work is a little frustrating.

它不仅适用于同一个元素，还适用于整个子树 - 因为整个子树并未呈现。

• 您可以在包装器上设置display: block，然后强制回流(通过使用wrapperElement.offsetHeight; 刷新样式缓冲区)，然后添加一个设置的类opacity:1 给你的 child (或者做任何你正在做的事情来启动动画)。
• 您可以使用不同的方法在视觉上隐藏您的包装器，例如 width: 0;高度:0；溢出:隐藏； visibility: hidden;(或者，为了更好的转换 transform: scale(0); visibility: hidden; pointer-events: none;)

一旦涉及到 display:none，您就会在转换时陷入困境。最好的方法是避免它。很长一段时间以来，我一直在使用第二个选项，没有出现任何重大问题。

---

在 OP 添加一些演示代码后编辑:

• 包装器的 .animate() 也可以用 CSS 完成
• 不仅要使用供应商前缀的 CSS 属性 -webkit-transition，还要使用适当的 transition
• //延迟随着每一列的增加而增加 看起来像是一种误解。选择器 .columns > li:first-child 适用的所有元素都将具有完全相同的延迟 - 它们不会等待前一个元素完成其转换。如果你想在 CSS 中定义它，你将不得不使用 :nth-child()。或其堂兄弟之一