CSS3 Übergang Fadein mit Display: keine

Question

Ich habe ein Element, das ich möchte Fade mit CSS3. Es kann von zwei Klassen mit opacity: 0 und opacity: 1 einfach getan werden, aber Problem Element verblasst ist einig Drop-down-Menü und es hat Elemente unter es, so dass selbst wenn es hat Opazität: 0, seine noch anklickbare und Elemente unter ist es nicht. Wenn ich das display: none; Attribut hinzufüge, ist das Element nicht animiert.

Ist es möglich mit css nur zu vermeiden?

ich this geprüft habe, aber didnt finden Lösung arbeiten

http://jsfiddle.net/Eh7jr/

Answer 1

Statt display:none, versuchen Sie es mit visibility: hidden;

FIDDLE

this article Siehe in dem es heißt:

Sichtbarkeit beseelt trotz der CSS Basic Box Modell spec sagen „Anima: no“

Answer 2

Sie können ein Element machen keine Klicks mit diesem akzeptieren:

.hidden 
{ 
    pointer-events:none; 
} 

Answer 3

versuchen, ein Element zu machen, die nicht akzeptieren Klicken Sie, indem Sie den Z-Index auf einen negativen Wert anwenden.

a{z-index: -999;} 

Oh! Ich habe dein Problem verstanden. Sie können visibility: collapse; besser als versteckt, denke ich.

Answer 4

Bemerken das Beispiel in dem JS Fiddle oben gebrochen wurde, den Code hier festgelegt:

Answer 5

Sie es um 100% CSS tun können reinen Code:

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

die fiddle behoben.

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