嗨有一个打开的菜单:悬停.
当我将鼠标悬停在下一个元素上时,它会等待一下.
我希望两个过渡同时产生手风琴效果.
我错过了什么?
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
vals.. 16
没有时间延迟,两者都在同一时间发生.
问题在于你正在对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的初始值和最终值.
没有时间延迟,两者都在同一时间发生.
问题在于你正在对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的初始值和最终值.