我创建了2个小提琴，单击“产品”列表项会显示一个子菜单，但我需要它才能转换。小提琴之间的唯一区别是，第二个链接的工作方式与我需要的一样，但是使用了“hack”，在firefox和chrome中进行了测试，但它在边缘不起作用。
https://jsfiddle.net/tzswq34a/2/
https://jsfiddle.net/tzswq34a/3/
代码的唯一区别是第二个链接在Javascript部分的第10行下面有代码行：
$submenu.height();
为什么查询子菜单的高度使其有效？
答案 0 :(得分：0)
不幸的是，CSS Spec目前不支持来自/ auto的动画（例如height: auto;，这是默认设置）。浏览器需要一个可以转换的显式高度。
编辑：说清楚：通过使用$submenu.height();，显式设置高度，因此可以顺利过渡到它。
答案 1 :(得分：0)
如果您感兴趣https://jsfiddle.net/tzswq34a/7/ Kyle Simpson（https://twitter.com/getify）说CSS子系统是＆＃34;懒惰＆＃34;它在没有高度查询的情况下工作。并且批次尽可能地协同工作。我对此的理解是，因为在同一函数调用中高度设置为ul两次，所以只有最后一个值被设置，因此从未在元素上设置0。
$submenu.height();
该行使其在链接2中起作用，因为它导致在函数执行期间在元素上设置第一个css高度赋值（0）。
在新的小提琴中，转换高度在传递给setTimeout的匿名函数内设置，事件循环将在正在执行的当前函数之后处理，因此在调用该匿名函数之前设置为0.