关于CSS：CSS3过渡淡入淡出显示：无


CSS3 transition fadein with display:none

我有一些要在CSS3中淡出的元素。它可以通过2个带有opacity: 0和opacity: 1的类简单地完成，但是问题是元素已褪色，该元素是一些下拉菜单，并且在其下具有元素，因此即使它具有不透明度：0，其仍是"可单击的"并且元素位于不是。

如果添加display: none;属性，则元素不具有动画效果。

css是否只能避免这种情况？

我已经检查过了，但是没有找到有效的解决方案

http://jsfiddle.net/Eh7jr/

相关讨论

而不是display:none，请尝试使用visibility: hidden;

FIDDLE

请参阅此文章，其中指出：

visibility animates despite the CSS Basic Box Model spec saying
a€?Animatable: noa€?

相关讨论

您可以通过100％CSS纯代码来实现。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
.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
    }
}
相关讨论

取消了上面的JS Fiddle中的示例，在此处修复了代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 <style>
div {
    position: absolute;
    transition: all 2s;
}
div.opa {
    opacity: 0;
    visibility:hidden;
}
</style>
dsdsds
 
<p>clickme</p>

$('a').click(function(){
    $('div').toggleClass('opa');    
})

修复了小提琴：

您可以使用以下方法使元素不接受点击：

1
2
3
4
.hidden
{
    pointer-events:none;
}
相关讨论

通过将z-index应用于负值，尝试制作不接受点击的元素。

1
a{z-index: -999;}

哦！我了解您的问题。您可以将visibility: collapse;设置为比我认为的更好。