CSS 过渡同步

Question

您好，有一个在 :hover 时打开的菜单。
当我将鼠标悬停到下一个元素时，它会稍等片刻。
我希望两个过渡同时产生 Accordion 效果。

我错过了什么？

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

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

问题是你正在对最大高度进行更改，除此之外，还有一个巨大的值(value)。

因此，它在增长时的过渡非常快(因为像素/秒很高)，但是瞬间。

收缩过渡立即开始，但在 500px - 16px 区间(或任何你的真实高度)内是不可见的，然后发生得很快，但(显然)延迟了。

您可以:

a) 转换高度而不是最大高度

b) 将最大高度设置为更接近您期望的更高高度

有一种可能性是你失去了灵 active 。您的 li 不再具有根据其属性计算的高度，而是您修复的高度。但是，使用 em 可以更好地完成此操作，例如 height: 1.2em;左右。

还有，关于最大高度转换的情况。假设悬停状态设置为 max-height: 100px;在我的浏览器中高度是 18.9 px。 (并且您不希望它被最大高度修改。

现在，假设您要在 1 秒内达到 max-height: 0px。过渡是根据这些值计算的(仅此而已!)。这表明在 0.5 秒时，过渡已经完成了一半，最大高度为 50 像素。高度自然还是18.9px。

经过 0.7 秒后，最大高度为 30px，高度仍为 18.9px。

没有从高度到最大高度的反馈，可用于以某种方式修改最大高度的初始值和最终值。