CSS CSS3 过渡淡入显示：无
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17510658/
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 transition fadein with display:none
提问by pie6k
I've got some element I want to fadewith CSS3. It can be simply done by 2 classes with opacity: 0and opacity: 1, but problem is faded element is some dropdown menu and it has elements underit, so even if it has opacity: 0, its still 'clickable'and elements underit are not.
我有一些我想用CSS3淡化的元素。它可以简单地通过2个教学班，做和，但问题是褪色的因素是一些下拉菜单，它具有以下要素，所以即便有不透明度：0，其仍然“点击”和元素下它都没有。opacity: 0opacity: 1
If I add display: none;attribute, element is not animated.
如果我添加display: none;属性，元素不会被动画化。
Is it possible with css onlyto avoid it?
css有可能只是为了避免它吗？
I've checked thisbut didnt find working solution
我已经检查过这个，但没有找到有效的解决方案
采纳答案by Danield
Instead of display:none, try using visibility: hidden;
而不是display:none，尝试使用visibility: hidden;
See this articlewhich states:
请参阅这篇文章，其中指出：
visibility animates despite the CSS Basic Box Model spec saying “Animatable: no”
尽管 CSS Basic Box Model 规范说“Animatable: no”，但可见性仍然是动画
回答by Nguyen Tu
You can do it by 100% CSS pure code.
您可以通过 100% CSS 纯代码来实现。
.menu > li > ul{
display: none;
}
.menu > li:hover > ul {
display: block;
animation-duration: 0.5s;
animation-name: fadeInFromNone;
animation-fill-mode: forwards;
-webkit-animation-duration: 0.5s;
-webkit-animation-name: fadeInFromNone;
-webkit-animation-fill-mode: forwards;
-ms-animation-duration: 0.5s;
-ms-animation-name: fadeInFromNoneIE;
-ms-animation-fill-mode: forwards;
}
@-webkit-keyframes fadeInFromNone {
0% {
opacity: 0
}
1% {
opacity: 0
}
100% {
opacity: 1
}
}
@keyframes fadeInFromNoneIE {
0% {
opacity: 0
}
1% {
opacity: 0
}
100% {
opacity: 1
}
}
@keyframes fadeInFromNone {
0% {
opacity: 0
}
1% {
opacity: 0
}
100% {
opacity: 1
}
}
回答by Azraelz
Noticed the example in the JS Fiddle above was broken, fixed the code here:
注意到上面 JS Fiddle 中的例子被破坏了，修复了这里的代码：
<style>
div {
position: absolute;
transition: all 2s;
}
div.opa {
opacity: 0;
visibility:hidden;
}
</style>
<div class=opa>dsdsds</div>
<br> <br>
<p><a href="#">clickme</a></p>
<script>
$('a').click(function(){
$('div').toggleClass('opa');
})
</script>
Fixed the fiddle:
修复了小提琴：
回答by Ben
You can make an element not accept clicks with this:
您可以通过以下方式使元素不接受点击：
.hidden
{
pointer-events:none;
}
回答by Bhojendra Rauniyar
try to make an element that do not accept click by applying z-index to negative value.
尝试通过将 z-index 应用于负值来制作不接受点击的元素。
a{z-index: -999;}
Oh! I understood your problem. You can set visibility: collapse;better than hidden I think.
哦！我理解你的问题。你可以设置visibility: collapse;比隐藏更好的我认为。
