CSS转换同步

Question

嗨有一个打开的菜单:悬停.
当我将鼠标悬停在下一个元素上时,它会等待一下.
我希望两个过渡同时产生手风琴效果.

我错过了什么？

小提琴

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:100px; 我的浏览器的高度为18.9像素.(并且您不希望通过max-height修改它.

现在,让我们说你将在1秒内达到max-height:0px.转换是根据这些值计算的(没有别的!).这使得在0.5秒时,过渡的一半已经过去,并且最大高度为50px.高度自然仍然是18.9像素.

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

没有从高度到最大高度的反馈,可用于以某种方式修改max-height的初始值和最终值.