CSS转换只影响不是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 - >表示视口高度的100％。 （浏览器窗口）
• 身高：100％ - >意味着父母身高的100％。

根据我的理解，您不能在高度百分比上使用过渡。但是您可以在最小高度属性上使用转换。

尝试添加以下代码：

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 
}