当父级从显示状态转到子级时如何过渡子级 [英] How to transition child when parent goes from display: none to block

问题描述

我无法创建具有特定效果的弹出菜单.弹出按钮从display:none变为block，然后使用jquery对0到1的不透明度进行动画处理(反之亦然).这是必要的，因为否则，当元素的display属性更改时，过渡不会发生.我不认为这会传播给孩子们.但是在弹出按钮的内部，我有4列链接，这些链接具有不透明度过渡，每个链接都有其自己的延迟，因此它们一次进入一个.但是，这不起作用，因为出现弹出按钮.它们立即处于不透明状态:1，即使延迟时间很长，它仍然不起作用.

I'm having trouble creating a flyout menu with a specific effect. The flyout goes from display:none to block and then I use jquery to animate opacity from 0 to 1 (and vice versa). This is necessary because otherwise the transition does not happen when the element has just had it's display property changed. I did not think that this would propagate to children. But inside of my flyout I have 4 columns of links that have an opacity transition, each with it's own delay so they come in one at a time. However, this does not work as the flyout appears. They are instantly at opacity: 1 and even with a long delay time it still does not work.

有没有解决的办法?我知道CSS动画以及在同一元素上的显示更改无效，但是发现任何子动画也无效，这有点令人沮丧.当CSS如此简单时，我宁愿不必编写javascript.但是，如果只有javascript，那么这将是一个简单的解决方案.

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. I'd rather not have to write javascript when the CSS is so simple. But if javascript is the only answer, then that will be an easy solve.

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

Here's a very simplified example of the code:

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

"in"是导致列上转换的类:

"in" is the class that causes the transition on the columns:

.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;
}

推荐答案

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

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.

它不仅适用于同一元素，而且还适用于整个子树-因为不会呈现整个子树.

It does not only apply to the same element, but the entire sub-tree - as the entire sub-tree is not rendered.

• 您可以在包装器上设置display: block，然后强制重排(通过使用wrapperElement.offsetHeight;刷新样式缓冲区)，然后添加一个将opacity:1设置为子级的类(或执行您要执行的所有操作)开始播放动画.
• 您可以使用其他方法可视地隐藏包装器，例如width: 0; height: 0; overflow: hidden; visibility: hidden;(或者，对于更好的过渡transform: scale(0); visibility: hidden; pointer-events: none;)

• you can set display: block on the wrapper, then force a reflow (by flushing the style buffer with wrapperElement.offsetHeight;), then add a class that sets opacity:1 to your children (or do whatever you're doing to kick off the animations).
• you can use a different method of visually hiding your wrapper, eg width: 0; height: 0; overflow: hidden; visibility: hidden; (or, for nicer transitions transform: scale(0); visibility: hidden; pointer-events: none;)

一旦涉及到display:none，您就会对转换感到迷惑.最好的方法是避免这种情况.我使用第二个选项已经有一段时间了，没有任何重大问题.

As soon as display:none is involved, you're screwed when it comes to transitions. The best way is to avoid it. I've been using the second option without any significant problems for quite a while now.

在OP添加了一些演示代码后进行

edit after OP added some demo code:

• 包装器的.animate()也可以在CSS中完成
• 不仅使用供应商前缀的CSS属性-webkit-transition，而且还使用适当的transition
• // delay increases with each column看起来像是一个误解.选择器.columns > li:first-child应用于的所有元素将具有完全相同的延迟-他们将不等待上一个元素完成其转换.如果要在CSS中定义，则必须使用

• the .animate() of the wrapper can be done in CSS as well
• do not only use the vendor-prefixed CSS property -webkit-transition, but the proper transition as well
• // delay increases with each column looks like a misconception. all elements the selector .columns > li:first-child applies to will have the exact same delay - they won't wait for the previous element to finish its transition. If you want to define that in CSS, you'll have to play with :nth-child() or one of its cousins

这篇关于当父级从显示状态转到子级时如何过渡子级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！