Transitioning the height of a submenu in CSS and JavaScript
I've created 2 fiddles, clicking on the Products list item makes a submenu appear, I need it to transition however. The only difference between the fiddles is that the 2nd link works like I need it to but with a "hack", tested in firefox and chrome but it didn't work in edge.
https://jsfiddle.net/tzswq34a/2/
https://jsfiddle.net/tzswq34a/3/
The only difference in code is that the second link has the line of code below on line 10 in the Javascript section:
$submenu.height();
Why does querying the height of the submenu make it work?
Unfortunately the CSS Spec currently does NOT cover animations from/to auto (eg height: auto; , which is default). The browser needs an explicit height to which it may transition.
edit: To make it clear: By using $submenu.height(); , the height is set explicitly and it may therefore transition to it smoothly.
Here it works without the height query if you're interested https://jsfiddle.net/tzswq34a/7/ Kyle Simpson (https://twitter.com/getify) said that the CSS subsystem is "lazy" and that batches work together as much as possible. My understanding of that is that, because the height was set on the ul twice in the same function call only the last value gets set and and therefore 0 was never set on the element.
$submenu.height();
That line makes it work in link 2 because it causes the first css height assignment (0) to be set on the element during the function's execution.
In the new fiddle the transition height is set inside the anonymous function passed to setTimeout, which the event loop will process after the current function that is executing, therefore setting 0 before that anonymous function gets called.
链接地址: http://www.djcxy.com/p/39564.html上一篇: PHP功能和服务器效率