父进程从display:none到block时如何转换子进程

Question

我在创建具有特定效果的弹出菜单时遇到问题.弹出窗口从display:none到block然后我使用jquery来设置从0到1的不透明度(反之亦然).这是必要的,因为否则当元素刚刚更改了显示属性时,不会发生转换.我不认为这会传播给孩子们.但是在我的弹出窗口中,我有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

有没有解决的办法？我知道CSS动画和同一元素上的显示更改不起作用,但发现任何子动画也不起作用有点令人沮丧.

它不仅适用于同一个元素,而且适用于整个子树 - 因为整个子树不会被渲染.

• 你可以display: block在包装器上设置,然后强制重排(通过刷新样式缓冲区wrapperElement.offsetHeight;),然后添加一个设置opacity:1给你的孩子的类(或者做你正在做的任何事情来启动动画).
• 您可以使用不同的方法隐藏您的包装,例如width: 0; height: 0; overflow: hidden; visibility: hidden;(或者,为了更好的过渡transform: scale(0); visibility: hidden; pointer-events: none;)

一旦display:none涉及到,在转换时你就会被搞砸.最好的方法是避免它.我一直在使用第二种选择而没有任何重大问题.

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

• 该.animate()包装可在CSS来实现,以及
• 不要只使用供应商前缀的CSS属性-webkit-transition,但正确的transition,以及
• // delay increases with each column看起来像是一种误解.选择器.columns > li:first-child应用的所有元素将具有完全相同的延迟 - 它们不会等待前一个元素完成其转换.如果你想在CSS中定义它,你将不得不玩:nth-​​child()或它的一个表兄弟