Html CSS3 动画过渡：不透明度不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23581309/
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
CSS3 animation transition: opacity not working
提问by Vladimir
i'm having some trouble with animating a dropdown menu using css3. I need it to work with css3 and not jQuery or javascript. I've added all the rules neccessary but still the effect doesn't happen. Can anyone please help? Here is a fiddle of my code. Thank you.
我在使用 css3 为下拉菜单设置动画时遇到了一些麻烦。我需要它使用 css3 而不是 jQuery 或 javascript。我已经添加了所有必要的规则，但仍然没有效果。有人可以帮忙吗？这是我的代码的小提琴。谢谢你。
html code:
<header class="main-header">
<nav class="main-nav">
<ul class="top-nav">
<li>
<a href="#">home</a>
<ul class="drop-down">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</li>
<li>
<a href="#">about</a>
<ul class="drop-down">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</li>
<li>
<a href="#">products</a>
<ul class="drop-down">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</li>
<li>
<a href="#">contacts</a>
<ul class="drop-down">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</li>
</ul>
</nav>
</header>
css code:
nav.main-nav {
background: #333;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2f2f2f), to(#4f4f4f));
background-image: -webkit-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: -moz-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: -ms-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: -o-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: linear-gradient(top, #2f2f2f, #4f4f4f);
width: 100%;
}
.top-nav {
border-bottom: 2px solid #111;
height: 30px;
list-style-type: none;
margin: 0;
padding-left: 0;
width: 100%;
}
.top-nav li {
background: #333;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2f2f2f), to(#4f4f4f));
background-image: -webkit-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: -moz-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: -ms-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: -o-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: linear-gradient(top, #2f2f2f, #4f4f4f);
border-bottom: 2px solid #111;
border-right: 1px solid #555;
float: left;
font-size: 14px;
height: 20px;
padding-top: 10px;
position: relative;
text-align: center;
width: 150px;
}
.top-nav li ul.drop-down {
position: absolute;
top: 32px;
left: 0;
visibility: hidden;
display: none;
opacity: 0;
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.top-nav li:hover ul.drop-down {
visibility: visible;
opacity: 1;
display: block;
}
.top-nav li .drop-down li {
height: 20px;
-webkit-transition: height 0.3s ease;
-moz-transition: height 0.3s ease;
-o-transition: height 0.3s ease;
transition: height 0.3s ease;
}
.top-nav li .drop-down li:hover {
height: 30px;
}
.top-nav li a {
color: #aaa;
padding-top: 5px;
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 25px;
text-decoration: none;
}
回答by King King
You can just use visibilitywithout using display:
您可以只使用visibility而不使用display：
.top-nav li ul.drop-down {
list-style-type: none;
position: absolute;
top: 32px;
left: -40px;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.top-nav li:hover ul.drop-down {
visibility: visible;
opacity: 1;
}
