可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I've got some element I want to fade with CSS3. It can be simply done by 2 classes with opacity: 0 and opacity: 1, but problem is faded element is some dropdown menu and it has elements under it, so even if it has opacity: 0, its still 'clickable' and elements under it are not.

If I add display: none; attribute, element is not animated.

Is it possible with css only to avoid it?

I've checked this but didnt find working solution

http://jsfiddle.net/Eh7jr/

回答1:

Instead of display:none, try using visibility: hidden;

FIDDLE

See this article which states:

visibility animates despite the CSS Basic Box Model spec saying

“Animatable: no”

回答2:

You can do it by 100% CSS pure code.

.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

}

}

回答3:

You can make an element not accept clicks with this:

.hidden

{

pointer-events:none;

}

回答4:

Noticed the example in the JS Fiddle above was broken, fixed the code here:

div {

position: absolute;

transition: all 2s;

}

div.opa {

opacity: 0;

visibility:hidden;

}

clickme

$('a').click(function(){

$('div').toggleClass('opa');

})

Fixed the fiddle:

回答5:

try to make an element that do not accept click by applying z-index to negative value.

a{z-index: -999;}

Oh! I understood your problem. You can set visibility: collapse; better than hidden I think.