在CSS和JavaScript中转换子菜单的高度

我创建了2个小提琴，点击产品列表项可以出现一个子菜单，但我需要它来转换。 这两个小提琴之间的唯一区别是，第二个链接像我需要的那样工作，但带有一个“黑客”，在firefox和chrome中测试过，但它并没有在边缘工作。

https://jsfiddle.net/tzswq34a/2/

https://jsfiddle.net/tzswq34a/3/

代码中的唯一区别在于第二个链接在Javascript部分的第10行中有以下代码行：

$submenu.height();

为什么查询子菜单的高度使其工作？

---

不幸的是，CSS规范目前不涵盖从/到auto动画（例如， height: auto;这是默认值）。 浏览器需要一个可以转换的明确高度。

编辑：说清楚：通过使用$submenu.height(); ，高度被明确设定，因此可以顺利地过渡到高度。

---

如果你有兴趣，这里它没有高度查询工作https://jsfiddle.net/tzswq34a/7/凯尔辛普森（https://twitter.com/getify）说，CSS子系统是“懒惰”，批处理工作尽可能地一起。 我的理解是，因为在同一个函数调用中ul的高度设置了两次，所以只有最后一个值被设置，因此从未在元素上设置0。

$submenu.height();

该行使它在链接2中工作，因为它会在函数执行期间在元素上设置第一个CSS高度赋值（0）。

在新的小提琴中，转换高度设置在传递给setTimeout的匿名函数中，事件循环将在当前正在执行的函数之后处理，因此在调用匿名函数之前设置0。

链接地址: http://www.djcxy.com/p/39563.html

上一篇: Transitioning the height of a submenu in CSS and JavaScript

下一篇: CSS: firefox + table + height 100% + overflow hidden = madness