web-dev-qa-db-fra.com

Fadein de transition CSS3 avec affichage: aucun

J'ai un élément que je veux fade avec CSS3 . Cela peut être fait simplement par 2 classes avec opacity: 0 et opacity: 1, mais le problème est un élément défilant qui est un menu déroulant et qui contient éléments sous it, donc même s'il a l'opacité: 0, c'est toujours ' clickable 'et les éléments under ne sont pas.

Si j'ajoute l'attribut display: none;, l'élément est non animé.

Est-il possible avec css seulement de l'éviter?

J'ai vérifié ceci mais je n'ai pas trouvé de solution de travail

http://jsfiddle.net/Eh7jr/

csscss3css-transitions
14
pie6k

Au lieu de display:none, essayez d'utiliser visibility: hidden;

VIOLON

Voir cet article qui dit:

la visibilité est animée malgré la spécification de modèle de base CSS Basic «Animable: non»

10
Danield

Vous pouvez le faire avec du code 100% CSS 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
    }
}
8
Nguyen Tu

Vous pouvez faire en sorte qu'un élément n'accepte pas les clics avec ceci:

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

Remarqué que l'exemple dans JS Fiddle ci-dessus était cassé, corrigé 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>

Correction du violon :

1
Azraelz

essayez de créer un élément qui n'accepte pas de clic en appliquant z-index à une valeur négative.

a{z-index: -999;}

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

0
Bhojendra Rauniyar