CSS转换仅影响li而不是

Question

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

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

在这里查看原始版本（看起来很糟糕，只是忽略它）

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

除了一个细节之外它还可以正常工作。

当处于移动模式时＆＃39;下拉菜单不会转换，只有文本。基本上ul不是转换，但li是。

如果你改变了

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

到

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

有效，但菜单太长了。

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

感谢您的期待！

Answer 1

• 身高：100vh - ＆gt;意味着100％的视口高度。 （浏览器窗口）
• 身高：100％ - ＆gt;意味着父母身高的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
}