Fiddle

CSS

ul {
    border:2px solid #aaf;
    overflow:hidden;
}
li {
    max-height:0px;
    -webkit-transition: max-height 1s;
    -moz-transition: max-height 1s;
    transition: max-height 1s;
}
ul:hover li {
    max-height:500px;
}

HTML

<ul class="menu">Alpha
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>
<ul class="menu">Beta
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>
<ul class="menu">Gamma
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

Answer 1

没有时间延迟，两者都在同一时间发生。

问题在于你正在对max-height进行更改，除此之外，还有很大的价值。

因此，当它增长时的转换非常快（因为像素/秒很高），但是很快。

缩小的过渡开始于中间，但在500px - 16px间隔（或任何你真正的高度）中是不可见的，然后快速发生，但（显然）延迟。

你可以：

a）过渡高度而不是最大高度

b）将最大高度设置得更接近您期望的更高的高度

可能性存在失去灵活性的问题。您的li不再具有根据其属性计算的高度，而是您修复的高度。然而，使用ems可以做得更好，例如身高：1.2em;左右。

关于max-height过渡发生的事情。让我们说悬停状态设置为max-height：100px;我的浏览器的高度为18.9像素。（并且您不希望通过max-height修改。

现在，假设您将在1秒内达到max-height：0px。转换是根据这些值计算的（没有别的！）。这使得在0.5秒时，过渡的一半已经过去，并且最大高度为50px。高度自然仍然是18.9像素。

当0.7秒通过时，最大高度为30px，高度为18.9像素。

从高度到最大高度没有反馈可用于修改max-height的初始值和最终值。

CSS转换同步

Fiddle

1 个答案: