我无法创建具有特定效果的弹出菜单.弹出按钮从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中定义,则必须使用:nth-child()或其表亲之一
- 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
更多推荐
当父级从显示状态转到子级时如何过渡子级
发布评论