CSS 从不显示到显示块的转换，使用子导航导航

这是我的 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>

为什么没有过渡? 如果我设置

nav.main ul li:hover ul {
display: block;
visibility: visible;
opacity: 0; /* changed this line */
}

然后“子导航”将永远不会出现(当然) ，但为什么过渡上的不透明度不触发？如何使过渡工作？

286863 次浏览
小开
最佳答案

正如您所知道的，display属性不能被动画化，但只要在您的 CSS 中使用它，它就可以覆盖 visibility和 opacity转换。

溶液... 刚刚去除了 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>

小开

您可以使用动画关键帧而不是转换来实现这一点。更改悬停声明并添加动画关键帧，您可能还需要添加-moz-and-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>

这是你小提琴的最新情况

小开

一般来说，当人们试图将 display: none动画化时，他们真正想要的是:

  1. 隐藏内容，并且
  2. 项目隐藏时不要占用文档中的空间

大多数流行的答案使用 visibility，它只能实现第一个目标，但幸运的是，使用 position同样容易实现这两个目标。

由于 position: absolute删除了键入文档流间距时的元素，因此可以在 position: absolute和 position: static(全局默认值)之间切换，并与 opacity结合使用。参见下面的例子。

.content-page {
position:absolute;
opacity: 0;
}


.content-page.active {
position: static;
opacity: 1;
transition: opacity 1s linear;
}


提交答案