CSS 过渡只影响 li 而不是 ul

Question

我从这个网站制作了一个纯 CSS 导航栏。

http://blog.christopherianmurphy.com/2016/01/responsive-pure-css-menu.html

在这里看一个粗略的版本(看起来很垃圾，忽略它)

http://codepen.io/spinnaay/pen/ZOVNwg

除一个细节外，它工作正常。

在“移动模式”下，下拉菜单不会转换，只有文本。基本上 ul 不是过渡，但 li 是。

如果你改变

nav #menu-toggle:checked ~ ul {
  height:100%;
}

到

nav #menu-toggle:checked ~ ul {
  height:100vh;
}

可以，但是菜单太长了。

这对我来说是个奇怪的问题，但肯定有一个简单的答案。

感谢您的关注!

Answer 1

• height: 100vh -> 表示视口(viewport)高度的 100%。 (浏览器窗口)
• height: 100% -> 表示父级高度的 100%。

据我了解，您不能对高度百分比使用过渡。但是您可以在 min-height 属性上使用过渡。

尝试将以下内容添加到您的代码中:

nav #menu-toggle:checked ~ ul {
  min-height:0;
  transition: min-height .2s ease-in-out;
}

nav #menu-toggle:checked ~ ul {
  min-height:900px; // number higher then the total size of the children
}