CSS3 transition fadein avec affichage: aucun

J'ai quelques élément que je veux fondu avec CSS3. Il peut être fait simplement en 2 classes avec opacity: 0 et opacity: 1mais le problème est l'apparition d'élément est certains menu déroulant et il a éléments sousde sorte que même si elle a opacity: 0, il est toujours "cliquable" et des éléments sous il ne le sont pas.

Si j'ajoute display: none; attribut de l'élément est pas d'animation.

Est-il possible avec css pour l'éviter?

J'ai vérifié cette mais il n'a pas trouver de solution de travail

http://jsfiddle.net/Eh7jr/

source d'informationauteur pie6k

  1. 10

    Au lieu de display:noneessayez d'utiliser visibility: hidden;

    VIOLON

    Voir cet article qui stipule:

    visibilité anime malgré le CSS de Base du Modèle de Boîte spec dire
    “Animables: pas de”

  2. 8

    Vous pouvez le faire en 100% CSS code pur.

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

    Vous pouvez faire un élément à ne pas accepter clics:

    .hidden
{
    pointer-events:none;
}
  4. 1

    Remarqué l'exemple de la JS Fiddle ci-dessus a été brisé, fixe le code ici:

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

    Fixe le violon:

  5. 0

    essayer de faire un élément qui n'acceptent pas de cliquez sur par l'application z-index de valeur négative.

    a{z-index: -999;}

    Oh! J'ai compris votre problème. Vous pouvez définir visibility: collapse; mieux que caché, je pense.