CSS3 transition fadein with display:none

Question

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/

Answer 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”

Answer 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
    }
}

Answer 3

You can make an element not accept clicks with this:

.hidden
{
    pointer-events:none;
}

Answer 4

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

 <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:

Answer 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.