Question

示例：

<div id="one">
    (content)
</div>
 <div id="two">
    <ul>............</ul>
  </div>

我想要创建一个效果，看起来#two正在从#one下来，我尝试使用过渡，所以当我：将鼠标悬停在#one上以便#two似乎从#one下来但是内容停留在那里虽然只有背景尺寸发生变化，但我希望整个列表看起来像#one一样来自这个网站：http://merryweddings.com/

Answer 1

如果您知道将弹出的div的大小，您可以在'height'属性上进行简单的转换，如下所示：

http://jsfiddle.net/BeDQr/

您还可以使用'max-height'属性上的过渡并将其设置为一个非常大的值。

#two {
    max-height: 0;
    overflow: hidden;
    transition-property: max-height;
    transition: all 1s ease-in-out;
}
.wrapper:hover #two {
    max-height: 500px;
}

但在这种情况下，动画的结尾可能会有点突然。

Answer 2

您可能希望使用JQuery代替纯CSS。

查看此示例：http://labs.abeautifulsite.net/jquery-dropdown/

This link还展示了许多可能的JQuery解决方案。

Answer 3

请在此处查看此链接：How can I transition height: 0; to height: auto; using CSS?

另请参阅上面链接的第一个答案中的链接：Can you use CSS3 to transition from height:0 to the variable height of content?

遗憾的是，这是纯CSS方法的唯一解决方案。第二个链接显示了一种变通方法或黑客攻击。第一部分提供了一些进一步的细节。

如何创建一个向下滚动的菜单？ CSS

3 个答案: