这就是我的情况[jsFiddle链接][1]
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 */
}
那么"子导航"就不会出现(当然),但为什么不透明度的过渡没有触发?怎样才能使过渡生效?
如你所知,"显示 "属性不能被动画化,但只要把它放在你的CSS中,就可以覆盖 "可见性 "和 "不透明度 "的转换。
解决办法是......删除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>
<!--结束片段-->。
一般来说,当人们试图对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;
}
你可以用animation-keyframe而不是transition来做这个。改变你的悬停声明并添加动画关键帧,你可能还需要添加浏览器的前缀-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>