Html 从无显示到显示块的 CSS 转换，使用子导航进行导航
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38772442/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Css transition from display none to display block, navigation with subnav
提问by caramba
This is what I have jsFiddle link
这就是我的jsFiddle 链接
nav.main ul ul {
position: absolute;
list-style: none;
display: none;
opacity: 0;
visibility: hidden;
padding: 10px;
background-color: rgba(92, 91, 87, 0.9);
-webkit-transition: opacity 600ms, visibility 600ms;
transition: opacity 600ms, visibility 600ms;
}
nav.main ul li:hover ul {
display: block;
visibility: visible;
opacity: 1;
}<nav class="main">
<ul>
<li>
<a href="">Lorem</a>
<ul>
<li><a href="">Ipsum</a></li>
<li><a href="">Dolor</a></li>
<li><a href="">Sit</a></li>
<li><a href="">Amet</a></li>
</ul>
</li>
</ul>
</nav>Why is there no transition? If I set
为什么没有过渡？如果我设置
nav.main ul li:hover ul {
display: block;
visibility: visible;
opacity: 0; /* changed this line */
}
Then the "subnav" will never appear (of course ) but why does the transition on the opacity not trigger? How to get the transition working?
那么“子导航”将永远不会出现（当然）但是为什么不透明度上的转换不会触发？如何让过渡工作？
回答by Paulie_D
As you know the displayproperty cannot be animated BUT just by having it in your CSS it overrides the visibilityand opacitytransitions.
如您所知，该display属性不能被动画化，但是仅仅通过在您的 CSS 中使用它来覆盖visibility和opacity过渡。
The solution...just removed the displayproperties.
解决方案......只是删除了display属性。
nav.main ul ul {
position: absolute;
list-style: none;
opacity: 0;
visibility: hidden;
padding: 10px;
background-color: rgba(92, 91, 87, 0.9);
-webkit-transition: opacity 600ms, visibility 600ms;
transition: opacity 600ms, visibility 600ms;
}
nav.main ul li:hover ul {
visibility: visible;
opacity: 1;
}<nav class="main">
<ul>
<li>
<a href="">Lorem</a>
<ul>
<li><a href="">Ipsum</a>
</li>
<li><a href="">Dolor</a>
</li>
<li><a href="">Sit</a>
</li>
<li><a href="">Amet</a>
</li>
</ul>
</li>
</ul>
</nav>回答by Matt R O'Connor
Generally when people are trying to animate display: nonewhat they really want is:
通常，当人们试图为display: none他们真正想要的东西制作动画时：
- Fade content in, and
- Have the item not take up space in the document when hidden
- 淡入淡出内容，以及
- 隐藏时让项目不占用文档中的空间
Most popular answers use visibility, which can only achieve the first goal, but luckily it's just as easy to achieve both by using position.
最流行的答案使用visibility，它只能实现第一个目标，但幸运的是，使用position.
Since position: absoluteremoves the element from typing document flow spacing, you can toggle between position: absoluteand position: static(global default), combined with opacity. See the below example.
由于position: absolute从键入文档流间距中删除元素，您可以在position: absolute和position: static（全局默认值）之间切换，结合opacity. 请参阅以下示例。
.content-page {
position:absolute;
opacity: 0;
}
.content-page.active {
position: static;
opacity: 1;
transition: opacity 1s linear;
}回答by spirift
You can do this with animation-keyframe rather than transition. Change your hover declaration and add the animation keyframe, you might also need to add browser prefixes for -moz- and -webkit-. See https://developer.mozilla.org/en/docs/Web/CSS/@keyframesfor more detailed info.
您可以使用动画关键帧而不是过渡来做到这一点。更改悬停声明并添加动画关键帧，您可能还需要为 -moz- 和 -webkit- 添加浏览器前缀。有关更多详细信息，请参阅https://developer.mozilla.org/en/docs/Web/CSS/@keyframes。
nav.main ul ul {
position: absolute;
list-style: none;
display: none;
opacity: 0;
visibility: hidden;
padding: 10px;
background-color: rgba(92, 91, 87, 0.9);
-webkit-transition: opacity 600ms, visibility 600ms;
transition: opacity 600ms, visibility 600ms;
}
nav.main ul li:hover ul {
display: block;
visibility: visible;
opacity: 1;
animation: fade 1s;
}
@keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}<nav class="main">
<ul>
<li>
<a href="">Lorem</a>
<ul>
<li><a href="">Ipsum</a></li>
<li><a href="">Dolor</a></li>
<li><a href="">Sit</a></li>
<li><a href="">Amet</a></li>
</ul>
</li>
</ul>
</nav>Here is an update on your fiddle. https://jsfiddle.net/orax9d9u/1/
这是您的小提琴的更新。https://jsfiddle.net/orax9d9u/1/
